阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 切换开关操作

      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.axihe.com/try/demo_source/finger.png'), auto;
      }
      
      目录
      目录