Angularjs checkbox的ng屬性

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：

<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 來獲取到該元素。