使用$ event.target的AngularJS復選框更改問題

Question

我正在編寫一個簡單的AngularJS控制器來跟蹤檢查的復選框的數量。 試圖避免$scope.$watch而是使用ng-change來增加/減少總計數。

HTML ：

<form ng-controller="MainCtrl">
  <table>
    <tr ng-repeat="item in data">
      <td>
      <input type="checkbox" 
             value="{{item.id}}"
             ng-model="item.selected"
             ng-change="updateTotal($event)"> &nbsp; {{item.name}}
       </td>
    </tr>
  </table>
  <p>
      Total checked: {{totalSelected}}
   </p>
</form>

控制器片段

$scope.updateTotal = function($event) {

    var checkbox = $event.target;

    if (checkbox.checked) {
      $scope.totalSelected++;
    }
    else {
      $scope.totalSelected--;
    } 
}

我一直在我嘗試訪問$event.target的控制器中收到錯誤：

TypeError: Cannot read property 'target' of undefined

我創建了一個用於重新創建的Plunk： http ：//plnkr.co/edit/qPzETejmMHHZCQ2sV2Sk？p = info

如果有人有任何想法或建議，我將非常感激。

非常感謝你！

Answer 1

ng-change函數不允許將$event作為變量傳遞。

來自AngularJS官方github回購的合作者：

ng-change不是處理更改事件的指令（我意識到這在給定名稱時會引起混淆），但實際上是在調用ngModelController時通知。$ setViewValue（）被調用並且值發生變化（因為ng-change添加了一個監聽器到$ viewChangeListeners集合）。 所以這是預期的。

你可以閱讀更多關於它的信息， ng-change沒有得到$ event參數

你怎么解決你的要求？

只需將item.selected傳遞給ng-change函數並檢查其值。

HTML

  <input type="checkbox" 
         value="{{item.id}}"
         ng-model="item.selected"
         ng-change="updateTotal(item.selected)"> &nbsp; {{item.name}}

調節器

$scope.updateTotal = function(item_selected) {

    if (item_selected) {
      $scope.totalSelected++;
    }
    else {
      $scope.totalSelected--;
    } 
}

更新

你可以在這里用plnkr進行測試