AngularJs checkbox绑定

前端之家收集整理的这篇文章主要介绍了AngularJs checkbox绑定前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、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',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(三)大小写处理

原文链接:https://www.f2er.com/angularjs/148250.html

猜你在找的Angularjs相关文章