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

我有以下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>

这会传递给DASHJS，如下所示：-

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

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

目前，这只是将一个“活动”类设置为第一个列表元素，不管我是否单击另一个，它都会更改轨迹。如果单击其他列表项，“活动”类将从第一个列表项中删除。我需要“活动”类仅位于当前选定的曲目上，即选定的列表项

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

---

谁能启发我？对于Angular，我还是一个新手，所以我对它还是有点不了解。

与其使用轨迹索引将其标记为选中，不如使用轨迹本身。编写一个类似于

trackSelected（）

的函数，它获取一个轨迹，并使用它应用一个带有

ngClass

的类。例如

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

只需执行以下操作：

 <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>

通过这种方式，你也可以做一些事情，比如在你的播放器中显示选定的曲目，就像下面这样，只需点击一下，不需要修改索引等等

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

请注意，我碰巧

setSongTrack（track）

到

setsongtrackdex（$index）

。然后您当然会相应地更改js，如下所示：

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

$scope.setSongTrack = setSongTrack;
$scope.selectedIndex = 0;

---

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

我尝试了这种方法，所发生的只是在页面加载时将活动类添加到每个列表元素，单击列表项确实会更改轨迹，但活动类没有更改？抱歉，在您添加替代解决方案之前发表了评论，我现在将尝试。我为第一个解决方案添加了一个简单的提琴，请查看。谢谢，这有助于了解发生了什么，谢天谢地，它起了作用！

 <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>

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

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

<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>

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

$scope.setSongTrack = setSongTrack;
$scope.selectedIndex = 0;