AngularJs checkbox绑定
发布时间:2020-12-17 09:40:21 所属栏目:安全 来源:网络整理
导读:一、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'
一、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(三)大小写处理 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |