Angularjs checkbox的ng属性
2014-04-11 11:09
288 查看
angularjs 默认给 input[checkbox] 元素定制了一些属性,如:
ng-mudel 属性是Angularjs里面最常见的属性了,是用来数据双向绑定的属性。
ng-true-value 属性设置当 checkbox 选择状态返回的值。
ng-false-value 属性设置当 checkbox 非选择状态返回的值。
ng-change 属性设置当 checkbox 选择状态改变的时候调用的函数。
如果想 ng-change 触发的函数里获取到该触发该函数的元素不能直接传入 this ,而需要传入 $event 。因为在 Angularjs 里面,这个地方的 this 是 $scope 。我们可以传入 $event ,然后在 函数里面通过 $event.target 来获取到该元素。
<input type="checkbox" ng-mudel="name" ng-true-value="yes" ng-false-value="no" ng-change="fn()">
ng-mudel 属性是Angularjs里面最常见的属性了,是用来数据双向绑定的属性。
ng-true-value 属性设置当 checkbox 选择状态返回的值。
ng-false-value 属性设置当 checkbox 非选择状态返回的值。
ng-change 属性设置当 checkbox 选择状态改变的时候调用的函数。
默认checkbox:
<div ng-controller="checkout"> <input type="checkbox" ng-model="defaut_choose"> <p>{{defaut_choose}}</p> </div> <script> function checkout($scope){ // } </script>
添加其他属性的 checkbox:
<div ng-controller="checkout"> <input type="checkbox" ng-model="choose" ng-true-value="choosed" ng-false-value="unchoosed" ng-change="backfn();"> <p>{{choose}}</p> </div> <script> function checkout($scope){ $scope.choose = "choosed"; $scope.backfn=function(){ alert("checkbox值改变"); } } </script>
如果想 ng-change 触发的函数里获取到该触发该函数的元素不能直接传入 this ,而需要传入 $event 。因为在 Angularjs 里面,这个地方的 this 是 $scope 。我们可以传入 $event ,然后在 函数里面通过 $event.target 来获取到该元素。
相关文章推荐
- Angularjs checkbox的ng属性
- AngularJS中巧用ngModel的$asyncValidators属性写一个验证唯一性的Direcitve
- AngularJS使用ng-bind-html会过滤html中style属性的问题
- Angularjs checkbox ng-true-value不支持中文
- angularJS中ng-ng-repeat里的单选框(radio)和多选框(checkbox)赋值取值
- angularJs复选框checkbox选中进行ng-show显示隐藏
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- 使用angularjs中ng-repeat的$even与$odd属性时的注意事项
- AngularJS的ng-repeat显示属性名和属性值
- AngularJS中在<input type="checkbox" ng-model="ceshi" >与$scope.ceshi 那些事
- 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素
- angularjs基础ng属性指令
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- angularJs复选框checkbox选中进行ng-show显示隐藏的方法
- AngularJS使用 ng-disabled 属性与ng-model搭配,实现禁用button效果
- AngularJS——checkbox ng-checked的应用(回写:带真实案例代码)
- Angularjs使用ng-repeat中$even和$odd属性的注意事项
- angularjs 的ng-disabled属性操作
- 今天在设计中用到的相关的angularjs的ng系列与js函数要点:
- AngularJS--[ng:areq] Argument 'xxCtrl' is not a function, got undefined!错误