$event.target 的 AngularJS 复选框 ng-change 问题 [英] AngularJS checkbox ng-change issue with $event.target

问题描述

我正在编写一个简单的 AngularJS 控制器，用于跟踪选中的复选框数量.试图避免 $scope.$watch 而是使用 ng-change 来增加/减少总计数.

HTML:

<表格><tr ng-repeat="数据中的项目"><td><输入类型=复选框"value="{{item.id}}"ng-model="item.selected"ng-change="updateTotal($event)">&nbsp;{{项目名称}}</td></tr><p>检查总数:{{totalSelected}}</p></表单>

控制器代码段

$scope.updateTotal = function($event) {var checkbox = $event.target;如果(checkbox.checked){$scope.totalSelected++;}别的 {$scope.totalSelected--;}}

我在尝试访问 $event.target 的控制器中不断收到错误:

TypeError: 无法读取未定义的属性目标"

我创建了一个用于重新创建的 Plunk:http://plnkr.co/edit/qPzETejmMHHZCQ2sV2Sk?p=info

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

非常感谢！

解决方案

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

来自 AngularJS 官方 github 存储库中的合作者:

<块引用>

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

您可以阅读有关它的更多信息ng-change 没有获得 $event 参数

您如何解决您的需求?

只需将 item.selected 传递给您的 ng-change 函数并检查其值.

HTML

  {{项目名称}}

控制器

$scope.updateTotal = function(item_selected) {如果(item_selected){$scope.totalSelected++;}别的 {$scope.totalSelected--;}}

更新

您可以在此处进行测试，在此plnkr

I'm writing a simple AngularJS Controller that keeps track of the number of checkboxes checked. Trying to avoid $scope.$watch and instead use ng-change to increment/decrement the total count.

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>

Controller snippet

$scope.updateTotal = function($event) {

    var checkbox = $event.target;

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

I keep getting an error in the controller where I attempt to access $event.target:

TypeError: Cannot read property 'target' of undefined

I created a Plunk for recreating: http://plnkr.co/edit/qPzETejmMHHZCQ2sV2Sk?p=info

If anyone has any ideas or suggestions I would be very grateful.

Thank you very much!

解决方案

ng-change function doesn't allow to pass $event as variable.

From an collaborator in AngularJS official github repo:

ng-change is not a directive for handling the change event (I realize that this is confusing given the name), but is actually instead notified when ngModelController.$setViewValue() is called and the value changes (because ng-change adds a listener to the $viewChangeListeners collection). So this is as expected.

You can read more about it ng-change doesn't get the $event argument

How can you solve your requirement?

Just pass item.selected to your ng-change function and check its value.

HTML

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

Controller

$scope.updateTotal = function(item_selected) {

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

UPDATED

You can test it here, in this plnkr

这篇关于$event.target 的 AngularJS 复选框 ng-change 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！