Angularjs Ng单击Ng show/Ng hide可查看由Ng repeat创建的按钮列表

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

我（想我）明白为什么会发生这种情况：因为ng show变量（可见）正在更改，因此会影响所有变量

我通读了关于这个问题的其他类似答案（ng repeat ng show dilemna），但我无法将这些教训（例如使用$index）应用到我的示例中。此外，许多示例和小提琴都使用了一个div，单击该div可以执行类似于

show=！显示

，然后依次显示“加载…”

我觉得我的有点不同

这是我的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>

---

有什么方法可以解决这个问题？因此，当您单击一个播放按钮时，它仅隐藏播放按钮，并仅显示该按钮的暂停按钮。我猜可能是$index或Parentindex的问题，但经过几个小时的闲逛和阅读，我仍然没有接近它。

您正在对所有对象应用可见，而您只需要将它们应用于每个对象，如下所示：

    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>

函数采样控制器（$scope）{
$scope.songs=[
{title:'song1'，visible:true，url:'url-song-1'}，
{title:'song2'，visible:true，url:'url-song-2'}
];
$scope.playTrack=函数{
SC.stream（s.stream_url，函数（声音）{
$scope.sound=声音；
声音。播放（）；
});
s、 可见=假；
};
$scope.pauseTrack=函数{
s、 可见=真实；
};
}


{{s.title}}
玩
暂停

当您只需要将其应用于每个对象时，您正在将其应用于所有对象，如下所示：

    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>

函数采样控制器（$scope）{
$scope.songs=[
{title:'song1'，visible:true，url:'url-song-1'}，
{title:'song2'，visible:true，url:'url-song-2'}
];
$scope.playTrack=函数{
SC.stream（s.stream_url，函数（声音）{
$scope.sound=声音；
声音。播放（）；
});
s、 可见=假；
};
$scope.pauseTrack=函数{
s、 可见=真实；
};
}


{{s.title}}
玩
暂停

发生这种情况是因为您有一个公共变量

$scope.visible

请参阅jsbin：

html:

---

这是因为您有一个公共变量

$scope.visible

请参阅jsbin：

html:

希望这对您有所帮助。

---

希望这能对您有所帮助。

如果您不想为数据分配可见属性，另一种方法是在ng show属性中添加条件，如下所示：播放暂停如果您不想为数据分配可见属性，另一种方法是在ng show属性中添加条件，如下所示：播放PauseThank you Sylvester（感谢您加入jsbin）。为什么

$scope.sound.pause（）在这种情况下需要$scope吗？这几乎是我唯一没有得到的部分。@KylePennell当你调用streamTrack方法时，我们创建了$scope.sound对象，现在我们可以在pauseTrack中访问它并调用pause方法啊，好的。这是有道理的。谢谢Sylvester（也谢谢你包括jsbin）。为什么
$scope.sound.pause（）在这种情况下需要$scope吗？这几乎是我唯一没有得到的部分。@KylePennell当你调用streamTrack方法时，我们创建了$scope.sound对象，现在我们可以在pauseTrack中访问它并调用pause方法啊，好的。这是有道理的。使用这个链接[在这里输入链接描述][1][1]：@tharo？不确定您的意思抱歉Kyle链接丢失您可以在此处使用ng show=“showItem[$index]”您可能需要将showItem初始化为一个数组，如ng init=“showItem=[]”使用此链接[在此处输入链接说明][1][1]：@tharo？不确定您的意思抱歉Kyle链接丢失您可以使用ng show=“showItem[$index]”在这里您可能必须将showItem初始化为一个数组，如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="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>

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;
};
});

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