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', []);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（三）大小写处理

AngularJs checkbox绑定相关推荐

angularjs双向绑定_AngularJS隔离范围双向绑定示例
angularjs双向绑定 Earlier we looked at AngularJS Isolate scope attribute binding and I hope you got a be ...
[置顶] Jquery为单选框checkbox绑定单击事件
一.假设有如下一段html代码 <dd id="1"> <input id="checkbox-518" class="imagez ...
AngularJS 事件绑定(ng-click)
demo.html: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
关于ligerui grid分页checkbox绑定问题
前一阵在grid中使用checkbox的时候在第一页打对号选取,切到第二页再切回第一页,发现第一页本来打对号选取上的都不见了,后来找到了解决办法. 造成这种现象的原因就是,每次选择上对号后,都会赋予该 ...
AngularJS 双向绑定 input type='file'中文件名，文件内容
通过ng-model获取文件名,文件内容无效,这里用的都是双向绑定,但是双向绑定时参数传过去是undefined或者为空 <div ng-controller="getFileCtr ...
angularJs select绑定的model 取不到值
内容结构一.原因分析二. 解决办法一.原因分析 1.由于原型继承的关系,修改父级对象中的someBareValue会同时修改子对象中的值,但反之则不行. 2.n ...
AngularJs ng-options
1. select标签中的ng-model 使用时注意,选择的结果 <form class="form-horizontal container" ng-app=" ...
2016年11月30日 angularJS input=file 绑定change事件
angularJS 之前都没有听说过,刚进公司第一天领导让我自己在网上学习第二天开始帮忙做一点东西,遇到了第一个问题:angularJS 如何绑定file表单的change 上传图片,我不会用ang ...
一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
一款优秀的前端JS框架—AngularJS
前言 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表 ...

AngularJs checkbox绑定

AngularJs checkbox绑定相关推荐

最新文章

热门文章