如何在播放和暂停按钮之间切换？

Question

基本上,我想知道在用户点击时在两个img或div之间切换的最佳方法.因此,首先播放图像是可见的,当用户点击时,隐藏播放图像并显示暂停图像.当用户点击暂停图像时,隐藏暂停图像并显示播放图像.

我尝试使用ng-show但我只能弄清楚如何显示两个图像而不隐藏另一个.因此,播放图像将在暂停图像旁边,这是不理想的.

提前致谢 :)

我试过的代码不起作用:

HTML

<button ng-click="changeStatus" ng-show="checkStatus">Play</button>
<button ng-click="changeStatusAgain" ng-hide="checkStatus">Pause</button>

控制器:

$scope.changeStatus=function(){
    $scope.checkStatus = false;
}

$scope.changeStatusAgain=function(){
    $scope.checkStatus = true;
}

https://jsfiddle.net/n8nnwtte/

Answer 1

对两者使用相同的表达式,并根据您的逻辑否定它.

HTML

 <button class="play" ng-show="!song.playing" ng-click="song.togglePlay()">
 <button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">

JS

var $scope.song = {
    playing: false, // Set the initial state

    togglePlay: function() {
         $scope.song.playing = !$scope.song.playing; // This would alternate the state each time

         // Do something with the song
        if ($scope.song.playing) { /*..*/ }  else { /*..*/ }
    }
};

这假设您song在作用域中定义了一个对象,并且它具有一个名为的布尔属性playing.因此,如果song.playing是假的,我们会显示播放按钮,如果它是真的,我们会显示暂停按钮.

除了其实际控制回放的角色之外,togglePlay()所定义的方法然后可以用于交替状态song.playing.