點擊時的角度切換屬性，並在事件結束時重置它

Question

我有兩個播放按鈕，需要點擊時切換其活動類。當曲目完成播放時，我需要刪除特定按鈕的活動類。

檢視：

<div class="audio-player" ng-repeat="sample in audioCtrl.audioSamples"> 
    <button class="play-btn" ng-click="audioCtrl.play(sample.sampleId); toggle = !toggle" ng-class="{'active' : toggle}"></button> 
</div> 

控制器：

audioPlayer.onended = function() { 
    // Can I set toggle false here somehow? 
}; 

Answer 1

我已經包括兩種方式可以動態地切換特定專輯上的課程，我建議使用指令方法。但是當你提出HTTP請求時，另一個可能會更有幫助。

function exampleController($scope, $q, $timeout) { 
 
    $scope.audioSamples = [{ 
 
     id: 1, 
 
     name: "One" 
 
    }, 
 
    { 
 
     id: 2, 
 
     name: "Two" 
 
    }, 
 
    { 
 
     id: 3, 
 
     name: "Three" 
 
    }, 
 
    { 
 
     id: 4, 
 
     name: "Four" 
 
    } 
 
    ]; 
 

 
    $scope.play = function(event) { 
 
    var deferred = $q.defer(); 
 
    var elm = event.target; 
 
    angular.element(elm).addClass("active"); 
 
    $timeout(function() { 
 
     deferred.resolve(angular.element(elm).removeClass("active")); 
 
     return deferred.promise; 
 
    }, 5000); 
 
    }; 
 
} 
 

 
function exampleDirective() { 
 
    return { 
 
    restrict: "A", 
 
    link: function(scope, element, attrs) { 
 
     element.bind("click", function() { 
 
     return element.hasClass("active") ? 
 
      element.removeClass("active") : 
 
      element.addClass("active"); 
 
     }); 
 
    } 
 
    }; 
 
} 
 

 
angular 
 
    .module("app", []) 
 
    .controller("exampleController", exampleController) 
 
    .directive("exampleDirective", exampleDirective);

.container-fluid { 
 
    background-color: #1D1F20; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    padding: 5% 10% 10% 10%; 
 
    text-align: center; 
 
} 
 

 
.btn-container { 
 
    display: inline; 
 
} 
 

 
.play-btn { 
 
    margin: 10px; 
 
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
 
} 
 

 
.active { 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<link src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script> 
 
<div class="container-fluid" ng-app="app"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <div class="btn-container" ng-repeat="sample in audioSamples"> 
 
     <button class="btn btn-primary play-btn" ng-click="play($event)" ng-bind="sample.name"> 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

這個例子是從角文檔。你可以使用一個類似的概念在這裏：

<input id="setbtn" type="button" value="set" ng-click="myVar='my- 
class'"> 
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''"> 
<br> 
<span class="base-class" ng-class="myVar">Sample Text</span> 

Answer 3

所有你需要做的是「切換」變量控制器添加（直接或$範圍）。無論哪種方式會做的伎倆，但我會建議添加到控制器。你可以做這樣的...

控制器（假設 'audioPlayer' 是控制器 '這'）：

audioPlayer.toggle = false; 

查看：

<div class="audio-player" ng-repeat="sample in audioCtrl.audioSamples"> 
    <button class="play-btn" ng-class="{'active' : audioCtrl.toggle}" 
      ng-click="audioCtrl.play(sample.sampleId); audioCtrl.toggle = !audioCtrl.toggle"> 
    </button> 
</div>