AngularJS - Toggle class using ng-class directive

Question

Directive

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

Here clicking first time, I see ng-class being applied and mute icon appears, but clicking it again, do not toggle the class.

1. How do I toggle class using ng-class directive ?
2. How do I make one function for multiple classes to be applied using ng-class directive and call it like ng-class='whatClassIsIt(call.State)'?

Answer 1

You have to set the values for 'pauseClass' and 'muteClass' in your controller instead of 'controlClass' if it is not a typo in the question.

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