使用角度将活动状态添加到列表项

Question

我有以下HTML标记：-

<ul class="dropdown-menu">
<li ng-repeat="track in songTracks track by $index" ng-class="{active: $index===selectedIndex}">
<a ng-click="setSongTrack(track)">
{{track.name}}
</a>
</li>
</ul>

在Angular中，我使用这个：-

$scope.setSongTrack = setSongTrack;
$scope.selectedIndex = 0;
$scope.index= function(i) {
$scope.selectedIndex=i;
}; 

它传递给 DASHJS 是这样的：-

function setSongTrack(track) {
musicPlayer.setSongTrack(track);
$scope.selectedIndex = track;
}

musicPlayer是DASHJS的实例，它解析我的音轨。这一切都有效 - 我得到了一堆带有曲目名称的列表元素，我可以单击它们并按预期独立加载每个曲目。但是，我需要添加一些视觉方式来通知用户当前选择了哪个轨道，这可能最好通过添加 CSS "active"类来完成。

目前，这只是将"活动"类设置为第一个列表元素，无论我是否单击另一个并且它会更改轨道。如果我单击另一个列表项，则会从第一个列表项中删除"活动"类。我需要"活动"类仅在当前选定的轨道上，即选定的列表项。

现在我被难住了。我已经阅读了很多类似的SO问题，但没有找到我可以开始工作的东西。

谁能开导我？对 Angular 相当陌生，所以，我仍然有点菜鸟。

Answer 1

不要使用轨道的索引将其标记为选定，而是使用轨道本身。编写一个像trackSelected()这样的函数，它需要一个轨道，并使用它来应用一个带有ngClass的类。例如...

.HTML

<ul class="dropdown-menu">
<li ng-repeat="track in songTracks track by $index" ng-class="{ 'active': isSelected(track)} ">
<a ng-click="setSongTrack(track)" ng-bind="track.name">
</a>
</li>
</ul>

.JS

$scope.selectedTrack = null;
$scope.setSongTrack = function(track) {
musicPlayer.setSongTrack(track);
$scope.selectedTrack = track;
}
$scope.isSelected = function(track) {
return $scope.selectedTrack === track;
}

这是因为您可能会在某个时候在视图中的列表中添加或删除曲目，然后所选索引将无效。

Answer 2

就这样：

<ul class="dropdown-menu">
<li ng-repeat="track in songTracks track by $index" ng-class="{active: track===selectedTrack}">
<a ng-click="setSongTrack(track)">
{{track.name}}
</a>
</li>
</ul>

并在您的 JS 中

$scope.selectedTrack = undefined;
$scope.setSongTrack = function (track) {
musicPlayer.setSongTrack(track);
$scope.selectedTrack = track;
}

通过这种方式，您还可以一键在播放器中显示所选曲目，而无需摆弄索引等。

<h1>{{selectedTrack.name}}</h1>
<p>
<span>{{selectedTrack.totalTime}}</span>
</p>

这是一个简单的小提琴

替代解决方案

走$index路应该是这样的(只是解释以帮助你看到你做错了什么(

<ul class="dropdown-menu">
<li ng-repeat="track in songTracks track by $index" ng-class="{active: $index===selectedIndex}">
<a ng-click="setSongTrackIndex($index)">
{{track.name}}
</a>
</li>
</ul>

请注意，我偶然setSongTrack(track)setSongTrackIndex($index).然后你当然会相应地改变你的js，就像这样：

function setSongTrackIndex(trackIndex) {
musicPlayer.setSongTrack(songTracks[trackIndex]);
$scope.selectedIndex = trackIndex;
}
$scope.setSongTrack = setSongTrack;
$scope.selectedIndex = 0;

如果您需要进一步的解释，请发表评论。