CODEWITHSUNDEEP
javascriptangularjs
gargantuan
gargantuan

Reputation: 8944

What's a good approach to creating a table in angular JS that highlights cells when they change?

I want to create an example of a table with dynamic data that also indicates when a table value has changed.

So imagine a table of data. One cell on one row changes it's value and it turns green to show that it has changed.

I'm new to Angular. I've been through the tutorial but I'm struggling to figure out the right kind of approach to this. I'm not asking for a step by step tutorial, but if an Angular veteran could give me a broad-strokes approach as to which parts of Angular I need to be focusing on, and a few tips on how best to structure the app, it would be a big help.

Right now I have an array of JSON objects attached to $scope.rows and a table with the rows created using ng-repeat. There's a button that changes some values in the rows data at random. That seems to be doing the trick of updating the rows as I expected, but I haven't figured out how to bridge that gap between data-binding and dom manipulation. And it's possible that my approach is all wrong.

Upvotes: 0

Views: 169

Answers (1)

BoxerBucks
BoxerBucks

Reputation: 3124

You need to detect when your rows object changes and which element changed. I have done something similar by first creating a copy of your rows object then putting a watch on scope.rows (make sure you include the object equality flag). When the watch fires, loop through the scope.rows object and when you find the element that is different, put some boolean property on it and set it to true.

In your row DOM tag, use:

ng-class="{highlightRowCSSClass:row.boolProp, normalRowCSSClass:!row.boolProp }"

and set the highlightRowCSSClass to be whatever you want to indicate a changed element.

After you set the prop on the object, set the copy of the rows to what it currently is and wait for the watch to fire again. You will need to clear the old value off each element when you loop through it again so you don't have two elements that are "on".

Upvotes: 1

Related Questions