更改播放/停止按鈕angularjs

Question

我正在嘗試進行基本的播放停止控制

當我單擊播放按鈕時，我希望它更改爲停止按鈕。反之亦然。此代碼正在工作，但它刷新了醜陋。播放按鈕隱藏之前停止按鈕顯示。反之亦然。任何想法？

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

Answer 1

使用

或ng-showng-hide存在用於更新視圖的小的延遲。使用ng-if（也適用於DOM）總是更好。

另一個，也許更好，但不要太多，道：

HTML：

JS：

$scope.playOrStop = function() { 
    if($scope.playVisible){ 
     $scope.audiofile.play(); 
    }else{ 
     $scope.audiofile.stop(); 
    } 

    $scope.playVisible = !$scope.playVisible; 
};