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>

在我的控制器中：

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

在控制器中

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

}

Answer 2

您可以在控制器中使用数组来记住点击时切换的每个按钮的当前状态：

$scope.btnStates = [];

<tr ng-repeat="r in results">
    <i ng-click="playedPreview(true); btnStates[$index]= !buttonStates[$index];" 
       ng-class="buttonStates[$index] ? 'play' : 'pause'" 
       class="material-icons small">
       {{btnStates[$index]? 'play_circle_outline' : 'pause_circle_outline' }}
    </i>   
</tr>

在ng-repeat中更改一个按钮（元素）

2 个答案: