一、AngularJs中关于checkbox的双向绑定
<input type="radio"
ng-model="string"
value="string"
[name="string"]
[ng-change="string"]
ng-value="string">
1.默认ng-model绑定返回的都是true或false
选择分类:
<label >
<input type="checkbox" ng-model='type' ng-change='changeValue();' name="" value="1">第一分类
</label>
<label >
<input type="checkbox" ng-model='type' ng-change='changeValue();' name="" value="2">第二分类
</label>
<label >
<input type="checkbox" ng-model='type' ng-change='changeValue();' name="" value="3">第三分类
</label>
type:{{type}}
<script>
(function() {
'use strict';
var app= angular.module('module', [
]);
app.controller('myCtrl',function($scope){
});
})();
</script>
2.可以只用ng-true-value,ng-false-value,分别指定选中和不选中ng-model的值
选择分类:
<label >
<input type="checkbox" ng-model='type.first' ng-true-value='1' ng-false-value="" name="type" >第一分类
</label>
<label >
<input type="checkbox" ng-model='type.second' ng-true-value='2' ng-false-value="" name="type" >第二分类
</label>
<label >
<input type="checkbox" ng-model='type.thrid' ng-true-value='3' ng-false-value="" name="type" >第三分类
</label>
<br/>
type:{{type}}
3.如果想把所有选中的结果,使用逗号隔开,处理方式1如下:
选择分类:
<label >
<input type="checkbox" ng-model='type[0]' ng-true-value='1' ng-change='change1();' ng-false-value="" name="type" >第一分类
</label>
<label >
<input type="checkbox" ng-model='type[1]' ng-true-value='2' ng-change='change1();' ng-false-value="" name="type" >第二分类
</label>
<label >
<input type="checkbox" ng-model='type[2]' ng-true-value='3' ng-change='change1();' ng-false-value="" name="type" >第三分类
</label>
<br/>
type:{{type}}
初始化绑定+获取选中结果:
(function() {
'use strict';
var app= angular.module('module', [
]);
app.controller('myCtrl',function($scope){
$scope.change1=function(){
var array=[];
for(var item in $scope.type){
if($scope.type[item])
array.push($scope.type[item]);
}
console.info(array);
}
//初始化绑定
$scope.type=[1,2];
});
})();
更多参考: