1

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

播放按钮 暂停按钮

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

我通读了其他类似的答案（ng-repeat ng-show dilemna），但我无法将这些课程（例如使用 $index）应用到我的示例中。此外，许多示例和小提琴使用您单击的 div，然后执行类似的操作show = !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>

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

$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 有关，但经过几个小时的闲逛和阅读，我仍然没有靠近。

4

3 回答 3

2

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

    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>
于 2014-07-14T19:10:57.460 回答
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>

希望这会帮助你 。

于 2015-05-05T08:50:10.627 回答
1

发生这种情况是因为您有一个公共变量$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;
};
});
于 2014-07-14T19:24:06.840 回答