1. 簡介
ionic封裝了一組指令用於表單輸入，包括ion-checkbox（複選框）,ion-radio（單選框），ion-toggle(開關）。
2. ion-checkbox
ionic的複選按鈕與Html的複選按鈕並無太多差異，除了樣式美觀以外，它的優點主要在於能夠用ng-model進行綁定，可以用ng-checked方便地控制其是否選中，可以用ng-change監聽其選中狀態執行相應的操作。下面分別是一個最基礎的例子以及一個較複雜的例子。
<body ng-app="myApp" ng-controller="myController">
<ion-checkbox ng-repeat="fruit in fruits">
{{fruit}}
</ion-checkbox>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myController", function ($scope) {
$scope.fruits = ["蘋果","荔枝","雪梨","西瓜"];
});
</script><body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar bar-positive">
<h1 class="title">ion-checkbox</h1>
</ion-header-bar>
<ion-content class="scroll-content has-header">
<ion-checkbox class="checkbox-balanced" ng-repeat="fruit in fruits" ng-model="fruit.checked" ng-change="changeHint()">
{{ fruit.name }} : {{ fruit.checked }}
</ion-checkbox>
<div class="h2">{{ hint }}</div>
</ion-content>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myController", function ($scope,$location) {
var getSelectedFruit = function() {
var temp = "您選擇了";
var first = true;
for(x in $scope.fruits) {
if($scope.fruits[x].checked) {
if(!first) {
temp += '，';
}
temp += $scope.fruits[x].name;
first = false;
}
}
if(first == true) {
temp = "您沒有選擇任何水果";
}
return temp;
};
$scope.fruits = [
{name:"蘋果",checked:false},
{name:"荔枝",checked:true},
{name:"雪梨",checked:false},
{name:"西瓜",checked:false}
];
$scope.hint = getSelectedFruit();
$scope.changeHint = function() {
$scope.hint = getSelectedFruit();
};
});
</script>
</body>
3. ion-radio
ionic的單選框同樣與Html的單選框差異不大，主要是能用ng-model實現與作用域變量的數據綁定，使用ng-value給各個單選按鈕設置對應值。ng-model和ng-value的聯繫是ng-value設置的是單選按鈕選中時對應的邏輯值，ng-model是將變量與該邏輯值進行雙向綁定。
<ion-content class="scroll-content has-header">
<ion-list>
<div class="item item-divider">{{ choice }}</div>
<ion-radio ng-model="choice" ng-value="value[0]">蘋果</ion-radio>
<ion-radio ng-model="choice" ng-value="value[1]">荔枝</ion-radio>
<ion-radio ng-model="choice" ng-value="value[2]">雪梨</ion-radio>
<ion-radio ng-model="choice" ng-value="value[3]">西瓜</ion-radio>
</ion-list>
</ion-content>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myController", function ($scope) {
$scope.value = ["第一個","第二個","第三個","第四個"];
$scope.choice="第二個";
});
</script>
下面是一個單選按鈕的簡單例子，要注意的是和上個例子不一樣，由於ng-repeat 創建了新的作用域（repeat多少次就創建了多少個作用域，它們“複製了”父作用域，但不是同個作用域），這個例子中choice必須寫在數組或對象內，因爲只有進行引用複製，子作用域才能成功更新外部作用域中對象或數組內的值。
<body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar bar-positive">
<h1 class="title">ion-radiobox</h1>
</ion-header-bar>
<ion-content class="scroll-content has-header">
<ion-list>
<div class="item item-divider">{{ model.choice }}</div>
<ion-radio ng-repeat="fruit in fruits" ng-model="model.choice" ng-value="fruit">{{ fruit }}</ion-radio>
</ion-list>
</ion-content>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myController", function ($scope) {
$scope.fruits = [
"蘋果","荔枝","雪梨","西瓜"
];
$scope.model = {
choice:"荔枝"
};
});
</script>
</body>
4.ion-toggle
在ionic中，使用ion-toggle聲明開關元素，開關作用與複選框一致，使用方法基本也一致，下面是一個最簡單例子。
<div ng-controller="myController">
<ion-list>
<ion-toggle toggle-class="toggle-calm" ng-repeat="item in items" ng-model="item.select">
</ion-toggle>
</ion-list>
</div>
<script>
var app = angular.module("myApp",['ionic']);
app.controller('myController',function($scope) {
$scope.items = [
{name:"鈴聲",select:true},
{name:"數據流量",select:true},
{name:"藍牙",select:false}
];
});
</script>
