AngularJs checkbox绑定

来源：互联网发布：网络性能评测指标编辑：程序博客网时间：2024/06/05 05:00

一、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];       });    })();

更多参考：

使用$watch来监视属性或对象的变化

AngularJs select绑定数字类型问题

AngularJS路由之ui-router（三）大小写处理

0 0