Question

我是AngularJS的新手，我正在开发一个全功能的音乐播放器 - 谷歌音乐。我有一个处理所有播放，排队等的播放器服务。我有一个包含所有任务的无限滚动表，我需要在正在播放的那首曲目上应用某个班级。

我能想到的第一个有角度的方法是使用类似下面的东西：

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

每一行。如果歌曲的id与播放器良好，播放的那个匹配，那么它将具有不同的颜色。问题在于，由于表中有很多行，因此需要在每个案例中评估表达式。在jQuery上，这将简单如下：

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

这样做有棱角的，有效的方式是什么？

Answer 1

您（几乎）总是可以自由地将jQuery包装在指令中：

在视图中：

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

在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

ng-class被调用太多次了

1 个答案: