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 單選框操作

ionic 手勢事件

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！