总结下,最近使用angularJS中checkbox和radio的使用,以方便后续使用。
一、CheckBox总结
<input Type="checkbox" ng-model="" [name=""]
[ng-true-value=""] [ng-false-value=""] [ng-change=""]>
<form name="myForm" ng-controller="ExampleController">
Value1: <input Type="checkbox" ng-model="value1" ng-checked="true"> <br/>
Value2: <input Type="checkbox" ng-model="value2" ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
<tt>value1 = {{value1}}</tt><br/> <tt>value2 = {{value2}}</tt><br/>
</form>
对象的JS
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.value1 = false;
$scope.value2 = 'YES';
}]);
ng-checked控制初始化时,CheckBox状态,其值可以为常量:如0和1,ture和false;或者,变量,变量可以赋值为 0和1 或者 false和true等。ng-model,可以动态控制checkbox状态,ng-model值为变量,其值只能为true和false时,才可以控制,0和1 不行。
如果,需要自定义CheckBox不同状态时的值,可以使用ng-true-value和ng-false-value,当ng-model中的变量值和ng-true-value值相同时,则为选中状态,反之,去勾选。
二、radio总结
input[type="radio"],相应的属性为
<input Type="radio" ng-model="" value="" [name=""]
[ng-change=""] ng-value="">
<form name="myForm" ng-controller="ExampleController">
<input Type="radio" ng-model="color" value="red"> Red <br/>
<input Type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input Type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color | json}}</tt><br/>
</form>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', Function($scope) {
$scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}]);
当ng-model中,变量的值与value值一致时,radio为选中状态。