AngularJS

Question

指令

scope.pauseClass = 'fa fa-pause';
scope.muteClass = 'fa fa-volume-on';

<button ng-click="doPlayOrPause(uniqId)"><i ng-class="pauseClass"></i></button>
<button ng-click="doMute(uniqId)"><i ng-class="muteClass"></i></button>

scope.doMute = function(){
        var vlc = scope.getVLC("vlc");
         if (vlc && vlc.playlist.isPlaying) {
            vlc.audio.toggleMute();
            scope.controlClass = 'fa fa-volume-off';
        }else{
            scope.controlClass = 'fa fa-volume-on';
        }
}


scope.doPlayOrPause = function(){
        var vlc = scope.getVLC("vlc");
        if(vlc){
            if(vlc.playlist.isPlaying){
                vlc.playlist.togglePause();
                scope.controlClass = 'fa fa-play';
            }else{
                vlc.playlist.play();
                scope.controlClass = 'fa fa-pause';
        }
    }
}

第一次点击这里，我看到 ng-class 被应用并出现静音图标，但再次点击它，不要切换 class。

如何使用 ng-class 指令切换 class？
如何为多个 class 应用一个函数 ng-class 指令并像这样调用它 ng-class='whatClassIsIt(call.State)'?

Answer 1

如果不是问题中的拼写错误，您必须在控制器中设置 'pauseClass' 和 'muteClass' 的值而不是 'controlClass'。

scope.doMute = function(){
        var vlc = scope.getVLC("vlc");
         if (vlc && vlc.playlist.isPlaying) {
            vlc.audio.toggleMute();
            scope.muteClass = 'fa fa-volume-off';
        }else{
            scope.muteClass = 'fa fa-volume-on';
        }
}


scope.doPlayOrPause = function(){
        var vlc = scope.getVLC("vlc");
        if(vlc){
            if(vlc.playlist.isPlaying){
                vlc.playlist.togglePause();
                scope.pauseClass = 'fa fa-play';
            }else{
                vlc.playlist.play();
                scope.pauseClass = 'fa fa-pause';
        }
    }
}

AngularJS - 使用 class 指令切换 class

AngularJS - Toggle class using ng-class directive

angularjs-directive

ng-class