AngularJS: How do I animate the text if $index changes?

Question

I have an app in angularjs which uses $interval() in background and requests datas form the database via PHP every seconds.

I then use track by $index which really helps on performance.

<tr ng-repeat="user in users track by $index">
<td>{{user.name}}</td>
</tr>

But I want to change the text color for 1 second when the data for that <td> changes.

score 0 · Answer 1 · answered Mar 25 '18 at 01:48

May be you can try

<td ng-style="{color:#000}">{{user.name}}</td>

keeping in mind that data will get reloaded every second.

Or you can track which data is being changed from controller with condition and set a variable true or false based on that like

$scope.datachange = true;

then in view you can do

 <td ng-style="datachange && {color:#000}">{{user.name}}</td>

score 0 · Answer 2 · answered Mar 25 '18 at 03:49

What I would do, instead of looking at the index changing, put an ng-class where you'd like the color to change like:

<tbody ng-class="{'changed-class': dataChanged}">

Then, after your data changes in the controller, change the value of $scope.dataChanged to true and then back to false a second later by injecting $timeout:

$scope.dataChanged = true;
$timeout(function(){
    $scope.dataChanged = false;
}, 1000);

And of course, add the changed-class in your css with the color you'd like the text to be when the change happens.

AngularJS: How do I animate the text if $index changes?

2 Answers2