web-dev-qa-db-ja.com

$ event.targetでのAngularJSチェックボックスのng-changeの問題

チェックボックスの数をチェックするシンプルな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

再作成用のプランクを作成しました： http://plnkr.co/edit/qPzETejmMHHZCQ2sV2Sk?p=info

誰かがアイデアや提案を持っている場合、私は非常に感謝します。

どうもありがとうございました！

javascriptangularjscheckbox
14
Philip Tenn

ng-change関数は、$eventを変数として。

AngularJS公式githubリポジトリの共同編集者から：

ng-changeは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--;
    } 
}

[〜＃〜] updated [〜＃〜]

ここでテストすることができます plnkr

45
levi