$event.target 的 AngularJS 复选框 ng-change 问题

Posted 2023-03-05

【中文标题】$event.target 的 AngularJS 复选框 ng-change 问题

【英文标题】：AngularJS checkbox ng-change issue with $event.target

【发布时间】：2015-05-20 10:59:44

【问题描述】：

我正在编写一个简单的 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>

控制器 sn-p

$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

如果有人有任何想法或建议，我将不胜感激。

非常感谢！

【问题讨论】：

@levi 是正确的。但从哲学上讲，避免在控制器中使用checkbox.checked（或任何与 DOM 相关的东西）。而是发送item（或item.selected）。

@DRobinson 这很有道理，谢谢。您的建议是正确的，不要将它与 DOM 如此紧密地耦合。

@levi，如果我们必须停止ng-change 内部的事件传播，我们该如何实现？

【参考方案1】：

ng-change 函数不允许将$event 作为变量传递。

来自 AngularJS 官方 github repo 中的合作者：

ng-change 不是处理更改事件的指令（我意识到 鉴于名称，这令人困惑），但实际上是 当调用 ngModelController.$setViewValue() 并且 值更改（因为 ng-change 添加了一个监听器到 $viewChangeListeners 集合）。所以这符合预期。

您可以阅读更多关于它的信息ng-change doesn't get the $event argument

您如何解决您的需求？

只需将 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

【讨论】：

这看起来非常优雅的解决方案，它符合 DRobinson 不使用 checkbox.checked 的建议。等我回家试试，谢谢！

@PhilipTenn 我为你准备了一个 plnkr，检查我的答案。

如果我们想将它与模型值分离怎么办？