捕捉子元素的变化事件

Question

我是AngularJS的新手，可以使用以下问题的一些帮助：我有一个包含大量列和输入元素的表。每当用户更改输入元素的值时，我希望行集被“编辑”。我通过将ng-change指令添加到每个输入元素来实现这一目的：

<table>
   <tr data-ng-repeat="item in vm.Model.data>
      <td>
         <input type="text" ng-model="item.Title" ng-change="item.changed=true" />
      </td>
      .
      .
   </tr>
</table>

这个解决方案的问题是我有很多列，我必须为每个'input'元素编写ng-change指令。有没有办法在'tr'元素的级别上捕获任何输入元素的change事件？

Answer 1

您可以编写自己的指令来监听onchange事件冒泡（在这种情况下，ngChange指令不起作用）。

.directive('onChange', function() {
    return {
        link: function(scope, element, attrs) {
            element.on('change input', function() {
                scope.$eval(attrs.onChange);
                scope.$digest();
            });
        }
    };
});

并使用它：

<tr data-ng-repeat="item in data" on-change="item.changed=true">

演示：http://plnkr.co/edit/lzIQ00l7aqXYlNCekWY8?p=preview

Answer 2

我会在名为IsChanged的项目上创建一个返回true / false的方法。用它来尝试“编辑”状态。在该方法中，使用您关心的每个item属性的$ dirty状态来确定行是否“已更改”。

像...一样的东西。

return ($scope.item.Title.$dirty || $scope.item.FirstName.$dirty);