首页 > Web开发 > 详细

Angularjs checkbox的ng属性

时间:2014-04-12 17:05:06      阅读:1057      评论:0      收藏:0      [点我收藏+]

angularjs 默认给 input[checkbox] 元素定制了一些属性,如:

<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:

bubuko.com,布布扣
<div ng-controller="checkout">
    <input type="checkbox" ng-model="defaut_choose">
    <p>{{defaut_choose}}</p>
</div>
<script>
function checkout($scope){
  //
}
</script>
bubuko.com,布布扣

 

添加其他属性的 checkbox:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

如果想 ng-change 触发的函数里获取到该触发该函数的元素不能直接传入 this ,而需要传入 $event 。因为在 Angularjs 里面,这个地方的 this 是 $scope 。我们可以传入 $event ,然后在 函数里面通过 $event.target 来获取到该元素。

 

 

 

 

 

 

Angularjs checkbox的ng属性,布布扣,bubuko.com

Angularjs checkbox的ng属性

原文:http://www.cnblogs.com/ayseeing/p/3658273.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!