转载

ionic 切换开关操作

以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。

HTML 代码

 <ion-header-bar class="bar-positive">   <h1 class="title">开关切换</h1> </ion-header-bar>           <ion-content>      <div class="list">          <div class="item item-divider">        Settings     </div>          <ion-toggle ng-repeat="item in settingsList"                 ng-model="item.checked"                  ng-checked="item.checked">       {{ item.text }}     </ion-toggle>          <div class="item">      <!-- 使用 pre 标签展示效果更美观 -->       <div ng-bind="settingsList | json"></div>      </div>          <div class="item item-divider">        Notifications     </div>          <ion-toggle ng-model="pushNotification.checked"                 ng-change="pushNotificationChange()">       Push Notifications     </ion-toggle>          <div class="item">      <!-- 使用 pre 标签展示效果更美观 -->       <div ng-bind="pushNotification | json"></div>      </div>          <ion-toggle toggle-class="toggle-assertive"                 ng-model="emailNotification"                 ng-true-value="'Subscribed'"                 ng-false-value="'Unubscribed'">       Newsletter     </ion-toggle>          <div class="item">      <!-- 使用 pre 标签展示效果更美观 -->       <div ng-bind="emailNotification | json"></div>      </div>        </div>    </ion-content>

由于pre标签冲突，实例中的 pre 已替换为 div标签，具体可以在"尝试一下"中查看。

JavaScript 代码

 angular.module('ionicApp', ['ionic'])  .controller('MainCtrl', function($scope) {    $scope.settingsList = [     { text: "Wireless", checked: true },     { text: "GPS", checked: false },     { text: "Bluetooth", checked: false }   ];    $scope.pushNotificationChange = function() {     console.log('Push Notification Change', $scope.pushNotification.checked);   };      $scope.pushNotification = { checked: true };   $scope.emailNotification = 'Subscribed';    });

css 代码：

 body {   cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto; }

效果如下所示：

正文到此结束

所属分类： ionic 教程

本文标签： IDE list cat value js json ip 实例 mail HTML JavaScript java App http 代码 src CSS onchange
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二