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“活动”类来完成。

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

现在我很难过。我已经阅读了很多类似的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>

Here is a simple fiddle

替代解决方案

走$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;

如果您需要进一步说明，请发表评论。

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

2 个答案:

HTML

JS

替代解决方案