Ng class called too many times

Question

I am new to AngularJS and I am developing a full-featured audio player in Google Music. I have a Player service that deals with all games, queues, etc. I have an endless scroll table with all the tasks, and I need to apply a specific class on this track that is playing now.

The first angular way I can come up with will use the following:

ng-class="{ playing: player.getCurrent()._id == song._id}" 

for each individual line. If the identifier of the song matches the one in which the player plays well, then it will have a different color. The fact is that since there are many rows in the table, the expression needs to be evaluated in each individual case. In jQuery, it will be as simple as:

 $('td[data-songid="'+playingId+'"]).addClass("playing").siblings(".playing").removeClass("playing"); 

What would be an angular, efficient way to do this?

Answer 1

You (almost) can always wrap your jQuery in a directive:

In sight:

 <table song-highlight> <tr ng-repeat="s in songs" data-songid="{{s.id}}"> <td>...</td> </tr> </table> 

In JS:

 app.directive('songHighlight', function(){ return function($scope, $element, $attrs){ $scope.$watch('playingId', function(playingId){ $element.find('tr').removeClass('playing'); $element.find('tr[data-songid="' + playingId + '"]').addClass('playing'); }) }; }); 

Demo plunkr