javascript - 更改 ng-repeat 中的一个按钮(元素)

Question

我有一个根据 API 调用的响应构建的表，因此使用 ng-repeat 来显示所有元素。

这个想法是应该有一个“播放按钮”供用户单击，然后播放一个简短的音频剪辑。当用户单击播放按钮时，该按钮应更改为“暂停按钮”，用户可以单击该按钮来暂停音频。

我的问题是，当按钮从“播放”更改为“暂停”时，它在表格的所有行中都会发生变化(而不仅仅是我单击播放按钮的那一行)。

这就是我的 HTML 中的样子:

<tr ng-repeat="r in results">
...
   <i ng-show="playButton" ng-click="playedPreview(false)" class="material-icons small play" style="cursor:pointer;">play_circle_outline</i>

   <i ng-show="!playButton" ng-click="playedPreview(true)" class="material-icons small pause" style="cursor:pointer;">pause_circle_outline</i> 
...
</tr>

在我的 Controller 中:

$scope.playedPreview = function(state) {
    $scope.playButton = state;
    console.log($scope.playButton);
}

我很快意识到为什么我的按钮在所有行中都发生变化，但我不知道应该如何强制它只在一行中发生变化。

我在这里看到过类似的问题: Having one button in ng-repeat change color when clicked, not all using Angularjs

他们使用 ng-class 添加类。但对我来说，问题是我需要“播放”类来播放音频，需要“暂停”类来暂停音频。我不能只在单击时添加一个类。

Answer 1

您可以向每个 r 对象添加一个属性:

<tr ng-repeat="r in results">
   <i ng-show="r.playButton" ng-click="playedPreview(r,false)" class="material-icons small play" style="cursor:pointer;">play_circle_outline</i>    
   <i ng-show="!r.playButton" ng-click="playedPreview(r,true)" class="material-icons small pause" style="cursor:pointer;">pause_circle_outline</i> 
</tr>

在 Controller 中

$scope.playedPreview = function(obj, state) {
    // reset other objects
    $scope.results.forEach(function(item){
           // perhaps use an if(obj !== item) here
           item.playButton = false;
    });
    obj.playButton = state;
    // use to determine what to play perhaps?
    $scope.activeItem = state ? obj : null;

}