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

【问题标题】：add a class to element in ng-repeat after some event在某些事件之后向 ng-repeat 中的元素添加一个类
【发布时间】：2016-07-17 12:03:13
【问题描述】：

我正在制作一个播放列表。我有这个 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 类应用于当前正在播放的新元素。

【问题讨论】：

current_song 中有什么内容？
它是一个范围变量，包含当前正在播放的歌曲，它有歌曲的标题，url
这应该可以：jsfiddle.net/d9Ld4ewx，按照 Rishi 的建议检查您的 current_song 变量

标签： javascript angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

更改歌曲时将 $scope.current_song 设置为新歌曲并在 HTML 中：

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

【讨论】：

【解决方案2】：

你应该这样写

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

【讨论】：

【解决方案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。

【讨论】：

我刚刚注意到，我所做的也在工作，但是该类并没有立即应用，而是当我单击页面上的输入框然后单击它外部时，该类将应用于下一个元素。我认为这与消化周期有关
解决了，这是由于消化周期没有被启动所以没有更新，直到我采取一些行动来启动它
@SwapneshKhare 这里的摘要循环怎么会一团糟？你在那里做什么，你需要运行摘要循环..

【解决方案4】：

ng-repeat 的工作方式是，它创建一个子作用域，该作用域原型继承自当前作用域。因此内部current_song 值不会因此而更新。我不想再重复回答为什么它不起作用，你可以找到explanation here。您必须使用Dot Rule 才能在ng-repeat 中正确选择current_song 值，并且在有条件时您应该将其与其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>

【讨论】：

嘿伙计，有一些语法错误..看看：D
感谢提醒的朋友，您可以提出修改建议，我很乐意接受。
事实上，我的编辑会在未经您许可的情况下自动更新您的答案。这就是我没有这样做的原因。但让我纠正一件事：D
如果你有足够的信心，那这不是问题，不过谢谢伙计..
乐于助人:)