在 ng-repeat play/pause 按钮上使用 ng-show

Question

我正在创建要播放的歌曲列表。我想要每首歌曲左侧的 play/pause 切换按钮。现在，我似乎无法让播放按钮只在 ng-repeat 中切换一首歌曲。谁能帮忙？我看到的唯一适用的其他解决方案 AngularJS - using ng-show within ng-repeat 似乎已经按照我的方式编写了所有内容，但我仍然遇到同样的问题。

JS

$scope.play = function(id) {
  soundcloud.stream(id).then(function(player) {
    $scope.player = player;
    player.play();
    $scope.isPlaying = id;
  });
  $scope.isPlaying = id;
};

$scope.pause = function(id) {
  $scope.player.pause();
  $scope.isPlaying = false;
};

HTML

<ul ng-repeat="track in tracks">
   <li>
       <i class="fa fa-play" ng-show="isPlaying != track.id" ng-click="play(track.id)"></i>
       <i class="fa fa-pause" ng-show="isPlaying = track.id" ng-click="pause(track .id)"></i>
       <h4><a href="#" ng-bind="track.title"></a></h4>
   </li>
</ul>

Answer 1

您应该从 "play" 函数中提取播放器的初始化，似乎在每个实例中都没有必要；比如当你暂停并播放同一首曲目时。

我假设您一次只想播放一首曲目，因此您应该为当前活动的曲目 ID 分配一个变量，为是否正在播放曲目分配另一个变量；分开。

HTML

<ul ng-repeat="track in tracks">
   <li>
       <i class="fa fa-play" ng-show="!isPlaying || activeTrack !== track.id" ng-click="play(track.id)"></i>
       <i class="fa fa-pause" ng-show="isPlaying && activeTrack === track.id" ng-click="pause()"></i>
       <h4><a href="#" ng-bind="track.title"></a></h4>
   </li>
</ul>

JavaScript

$scope.player = null;
$scope.activeTrack = null;
$scope.isPlaying = false;

$scope.play = function(id) {
  if ($scope.activeTrack === id) {
    // if this track is already active, just play it
    $scope.player.play();
    $scope.isPlaying = true;
  } else {
    // if this track isn't active, pause current player
    // then stream the new track
    if($scope.player) $scope.player.pause();

    soundcloud.stream(id).then(function(player) {
      $scope.player = player;
      $scope.player.play();
      $scope.isPlaying = true;
      $scope.activeTrack = id;
    });
  }
};

$scope.pause = function() {
  if($scope.player) $scope.player.pause();
  $scope.isPlaying = false;
};

Answer 2

如评论中所述，只需更改 HTML

中的这一行

<i class="fa fa-pause" ng-show="isPlaying == track.id" ng-click="pause(track .id)"></i>

ng-show 指令需要一个用于评估的布尔值。

在 ng-repeat play/pause 按钮上使用 ng-show

Using ng-show on ng-repeat play/pause button

javascript

angularjs

ng-repeat

ng-show