欢迎光临
梦想从学习开始!

ionic 切换开关操作 | 小熊教程

ionic 切换开关操作

Tips:您正在学习的是ionic 切换开关操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8714 ,您可通过标签查询系列课程。祝您学习愉快!

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

HTML 代码

Tips:您正在学习的是ionic 切换开关操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8714 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <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 代码

Tips:您正在学习的是ionic 切换开关操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8714 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 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; } 

效果如下所示:

赞(0) 打赏
未经允许不得转载:小熊分享邦 » ionic 切换开关操作 | 小熊教程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏