Ng-click ng-show / ng-hide获取由ng-repeat创建的按钮列表

Question

我有一个由ng-repeat创建的播放/暂停按钮列表。您单击每个播放按钮以播放歌曲，然后该按钮变为暂停按钮（这样您就可以暂停它）。我能够正确设置按钮和点击事件，但遇到了点击一个播放按钮时所有按钮变为暂停按钮的问题。

我（我想）得到为什么会发生这种情况：因为ng-show变量（可见）正在改变，因此会影响所有这些变量。

我通过其他类似的答案阅读了这篇文章（ng-repeat ng-show dilemna），但我还没有能够将这些课程（例如使用$ index）应用到我的例子中。此外，许多示例和小提琴使用您单击的div，然后执行类似show = !show的操作，然后再显示＆＃34; loading ...＆＃34;

我认为我的情况有点不同。

这是我的HTML：

<div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat="show in shows"> 

                <div class="media col-md-3">

                    <img class="media-object img-rounded img-responsive" src="/images/play_button.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show.stream_url)" ng-show="visible">
                    <img class="media-object img-rounded img-responsive" src="/images/pause_button.png" alt="playbutton" height="40px" width="40px" padding-right="5px" ng-click="pauseTrack(sound)" ng-hide="visible">

                </div>
        </div>

这是我的控制器的相关部分：

$scope.visible = true;

$scope.streamTrack = function (stream_url) {
    SC.stream(stream_url, function (sound) {
    $scope.sound = sound;
    sound.play();
    });

    $scope.visible = false;

};

$scope.pauseTrack = function (sound) {
    sound.pause();
    $scope.visible = true;
};

有哪些方法可以解决这个问题？因此，当您单击一个播放按钮时，它只会隐藏播放按钮并仅显示暂停按钮。我猜它可能是$ index或Parentindex的东西，但经过几个小时的乱搞和阅读之后，我仍然没有接近。

Answer 1

当您只需将它们应用于每个对象时，您可以对所有对象应用可见：

    function sampleController($scope){

        $scope.songs = [
            {title:'song1',visible:true,url:'url-song-1'},
            {title:'song2',visible:true,url:'url-song-2'}
        ];

        $scope.playTrack = function(s) {
            SC.stream(s.stream_url, function (sound) {
              $scope.sound = sound;
              sound.play();
            });
            s.visible = false;
        };

        $scope.pauseTrack = function(s) {
            s.visible = true;
        };
    }

    <div ng-controller="sampleController">
        <ul>
            <li ng-repeat="s in songs">
                {{s.title}}
                <button ng-click="playTrack(s)" ng-show="s.visible">Play</button>
                <button ng-click="pauseTrack(s)" ng-show="!s.visible">Pause</button>
            </li>
        </ul>
    </div>

Answer 2

<div ng-init="showItem=[]">
    <div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat="show in shows">
        <div class="media col-md-3">
            <img class="media-object img-rounded img-responsive" src="/images/play_button.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show.stream_url)" ng-show="showItem[$index]">
            <img class="media-object img-rounded img-responsive" src="/images/pause_button.png" alt="playbutton" height="40px" width="40px" padding-right="5px" ng-click="pauseTrack(sound)" ng-hide="showItem[$index]">
        </div>
    </div>
</div>

希望这会对你有所帮助。

Answer 3

这是因为您有一个公共变量$scope.visible

请参阅jsbin：http://jsbin.com/woxali/1/edit

HTML：

<div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat="show in shows"> 

                <div class="media col-md-3">

                    <img class="media-object img-rounded img-responsive" 
                         src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/media-play.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show)" 
                         ng-hide="show.isplaying">
                    <img class="media-object img-rounded img-responsive" src="http://cdn.flaticon.com/png/256/12193.png" alt="playbutton" height="40px" width="40px" padding-right="5px" ng-click="pauseTrack(show)" ng-show="show.isplaying"">

                </div>
        </div>
      </div>

JS：

app.controller('firstCtrl', function($scope){
 $scope.sound = {};
 $scope.shows = [
   {  stream_url:1 },
   {  stream_url:2 },
   {  stream_url:3 },
   ];

 $scope.streamTrack = function (show) {

    SC.stream(show.stream_url, function (sound) {
    $scope.sound = sound;
    $scope.sound.play();
    });

    show.isplaying = true;

};

$scope.pauseTrack = function (show) {
    $scope.sound.pause();
    show.isplaying = false;
};
});