Catching change events of child elements

Issue

I'm fairly new to AngularJS and could use some help with following problem: I have a table with lots of columns and input elements. Whenever the user changes the value of an input elements I want the row set to be 'edited'. I achieved this by adding the ng-change directive to every input element:

<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>

The problem with this solution is that I have lots of columns and that I have to write the ng-change directive for every 'input' element. Is there a way to catch the change event of any input element on the level of the 'tr' element?

Solution

You can write your own directive that would listen an onchange event bubbling (ngChange directive would not work in this case).

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

and use it:

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

Demo: http://plnkr.co/edit/lzIQ00l7aqXYlNCekWY8?p=preview

Answered By - dfsq