0

I render table like so (there are many more fields):

<tr ng-repeat="client in clients">
    <td>{{client.name}}</td>
    <td>£{{client.total}}</td>
    //...
</tr>

The model (clients) changes in the controller often (an ng-click handler changes the data in the $scope). I would like to highlight all cells that has changed.

A highly related question on SO is this, but it introduces new markup (highlighter="person.firstName") on each element, whereas I simply want AngularJS to highlight any change on the table; that is, every time the DOM changes, I wish to add a highlight class.

How can this be achieved?

Community
  • 1
  • 1
Izhaki
  • 23,372
  • 9
  • 69
  • 107
  • The problem is, you shouldn't do this without an extra directive. If you start building your angular apps this way you won't get the full benefit of angular. Of course you could try to build an *DOM-changes-directive*, but even this would/should be an extra directive. – Yoshi Jun 24 '14 at 11:25
  • Hi Yoshi, could you please elaborate please? Seems to me logical that if I want something to apply to *all* changes, I shouldn't add extra markup everywhere. – Izhaki Jun 24 '14 at 11:34
  • I would disagree, even if you want something to apply to multiple elements, there should still be at some point a common parent (e.g. *body*). And this parent would then be the perfect target for a custom directive which would listen for dom-changes and act accordingly. – Yoshi Jun 24 '14 at 11:38
  • 3
    Your issue is that if the list of clients change, the whole ng-repeat is re-rendered. Therefore you cannot have a directive per cell which would be aware of its previous state and would highlight on change. Instead you should think about your model (clients) containing information about what has changed (or its previous value) and use an ngClass directive for applying a class name. – Thomas Roch Jun 24 '14 at 11:47
  • @ThomasRoch Very good point! – Yoshi Jun 24 '14 at 11:49
  • @Yoshi, I've edited my question to reflect that adding a directive is fine, so long it is not per element need hooking (eg, adding a directive to the body or table tags is fine). – Izhaki Jun 24 '14 at 11:56
  • Hi @ThomasRoch, In my specific case, the client (array) doesn't change, only the property of a particular client does. If a client is added or removed - I have no need to highlight anything and fine with ng-repeat re-rendering. – Izhaki Jun 24 '14 at 11:58
  • Well, how does a property gets updated? – Thomas Roch Jun 24 '14 at 12:00
  • A ng-click > to a method in the controller which goes through the client list and updates some properties. – Izhaki Jun 24 '14 at 12:03
  • Then perfect, you can set/update flags as you update some properties through the client list, and use those flags in an ngClass directive – Thomas Roch Jun 24 '14 at 12:21

0 Answers0