angularjs – ng-class被调用太多次了

发布时间：2020-12-17 17:12:48 所属栏目：安全来源：网络整理

导读：我是AngularJS的新手,我正在开发一个全功能的音乐播放器 – 谷歌音乐.我有一个处理所有播放,排队等的播放器服务.我有一个包含所有任务的无限滚动表,我需要在正在播放的那首曲目上应用某个班级. 我能想到的第一个有角度的方法是使用类似下面的东西： ng-class

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

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

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

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

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

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

解决方法

您(几乎)总是可以自由地将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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!