改变播放/停止按钮

change play/stop button angularjs

本文关键字：按钮 播放 改变      更新时间：2023-09-26

我正在尝试制作一个基本的播放停止控件

当我点击播放按钮时，我希望它变成一个停止按钮。,反之亦然。这段代码是工作的，但它做了一个丑陋的刷新。停止按钮显示在播放按钮隐藏之前。,反之亦然。任何想法?

在html 

<div style="margin-top: 1%;margin-left: 10%">
<button class="media-object button-icon ion-ios-play botonesPlayStop" ng-show="playVisible"
ng-click="btnReproducirAudio()"></button>
<button class="media-object button-icon ion-stop botonesPlayStop" ng-hide="playVisible"
ng-click="detenerAudio()"></button>
在js 

var ruta= "/android_asset/www/sounds/beep.amr";
$scope.audiofile = new Media(ruta);
$scope.detenerAudio = function () {
        $scope.audiofile.stop();
        $scope.playVisible=true;
};
$scope.btnReproducirAudio() {
        $scope.audiofile.play();
        $scope.playVisible=false;
}

使用ng-show或ng-hide会有一点延迟来更新视图。使用ng-if总是更好(也用于DOM)。

另一种方法，可能更好，但不是太多:

HTML: 

<button class="media-object button-icon botonesPlayStop" ng-class"{'ion-ios-play': playVisible, 'ion-stop': !playVisible}" ng-click="playOrStop()"></button>

JS: 

$scope.playOrStop = function () {
    if($scope.playVisible){
       $scope.audiofile.play();
    }else{
       $scope.audiofile.stop();
    }
    $scope.playVisible = !$scope.playVisible;
};
相关文章：