Question

我正在制作一个播放列表。我有这个ng-repeat，当前歌曲突出显示

<div ng-repeat="song in songs_list">
  <div ng-class="{'true':'current-song'}[song == current_song]">
    {{song.title}}
  </div>
</div>

现在在JS中我改变了current_song的值。我想将类current-song应用于当前正在播放的新元素。

Answer 1

将歌曲集$ scope.current_song更改为新歌曲和HTML：

<div ng-repeat="song in songs_list">
  <div ng-class="{'current-song':song===current_song}">
    {{song.title}}
  </div>
</div>

Answer 2

你应该这样写

<div ng-repeat="song in songs_list">
 <div ng-class="{'current-song': song == current_song}">
  {{song.title}}
 </div>
</div>

Answer 3

使用此语法，尝试使用此

<div ng-repeat="song in songs_list">
  <div ng-class="{'current-song':song.title == current_song}">
    {{song.title}}
 </div>
</div>

我建议，使用song.id代替song.title，并将current_song的id保留为歌曲ID。

Answer 4

ng-repeat的工作方式是，它创建了一个子范围，它原型继承自当前范围。因此，内部current_song值不会更新。我不想再重复一遍，为什么它不起作用，你可以找到explanation here。您必须使用Dot Rule才能在current_song内获得正确的选定ng-repeat值，＆amp;有条件的时候你应该将它与unique_id进行比较（假设你有id道具）。

$scope.model = {
    current_song: null
};

<强> HTML

<div ng-repeat="song in songs_list">
  <div ng-class="{'current-song': song.id == model.current_song.id}">
    {{song.title}}
  </div>
</div>

在某些事件之后，在ng-repeat中向元素添加一个类

4 个答案: