ionic 切换开关操作

ionic

ionic 教程 ionic 安装 ionic 创建 APP ionic 头部与底部 ionic 按钮 ionic 列表 ionic 卡片 ionic 表单和输入框 ionic Toggle(切换开关) ionic checkbox（复选框） ionic 单选框 ionic Range ionic select ionic tab(选项卡) ionic 网格(Grid) ionic 颜色 ionic icon(图标) ionic 上拉菜单(ActionSheet) ionic 背景层 ionic 下拉刷新 ionic 复选框 ionic 单选框操作 ionic 切换开关操作 ionic 手势事件 ionic 头部和底部 ionic 列表操作 ionic 加载动作 ionic 模态窗口 ionic 导航 ionic 平台 ionic 浮动框 ionic 对话框 ionic 滚动条 ionic 侧栏菜单 ionic 滑动框 ionic 加载动画 ionic 选项卡栏操作

ionic 切换开关操作

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

HTML 代码

<ion-header-bar class="bar-positive">

</ion-header-bar>

<ion-content>

Settings

</div>

<ion-toggle ng-repeat="item in settingsList"

ng-model="item.checked"

ng-checked="item.checked">

</ion-toggle>

</div>

Notifications

</div>

<ion-toggle ng-model="pushNotification.checked"

ng-change="pushNotificationChange()">

Push Notifications

</ion-toggle>

</div>

<ion-toggle toggle-class="toggle-assertive"

ng-model="emailNotification"

ng-true-value="'Subscribed'"

ng-false-value="'Unubscribed'">

Newsletter

</ion-toggle>

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

1
2
3

body {

cursor: url('http://www.web3.xin/try/demo_source/finger.png'), auto;

}

上一篇:ionic 单选框操作

下一篇:ionic 手势事件

我要发贴

ionic