Discover the Power of AngularJS – Master the Art of Toggling Classes

Instructions

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

Upon clicking the button for the first time, the necessary changes are made and the mute icon appears. However, upon subsequent clicks, the class is not toggled.

  1. Is there a way to toggle the class using the "ng-class" directive?
  2. How can I create a single function that applies multiple classes using the "ng-class" directive and call it like "ng-class='whatClassIsIt(call.State)'?"
angularjsangularjs-directiveng-class

Answer №1

To address the question accurately, make sure to set the values for 'pauseClass' and 'muteClass' in your controller rather than 'controlClass', unless it is an unintentional typographical error.

scope.doMute = function(){
        var vlc = scope.getVLC("vlc-player");
         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-player");
        if(vlc){
            if(vlc.playlist.isPlaying){
                vlc.playlist.togglePause();
                scope.pauseClass = 'fa fa-play';
            }else{
                vlc.playlist.play();
                scope.pauseClass = 'fa fa-pause';
        }
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

determining the quantity of dates

Is there a way to calculate the number of a specific day of the week occurring in a month using AngularJS? For example, how can I determine the count of Saturdays in a given month? Thank you. Here is the code snippet I have been working on: <!doctype ...

javascriptangularjsangularjs-ng-repeat

Error: karma cannot locate the templateUrl for Angular component

I'm encountering some issues while running tests on angular directives with karma. The problem arises when the directive comes from a templateUrl and is not being translated properly. Here's my karma.conf.js configuration: 'use strict&apos ...

javascriptangularjsangularjs-directivekarma-runnerng-html2js

Accessing data from a service in AngularJS controller

I have been researching about promises and callbacks on various forums, like SO, but I am still unclear on when to use each. I am not entirely certain if my issue involves promises or callbacks. My struggle lies in fetching data from a service into a contr ...

angularjsservicecontroller

Modify components in a directive template depending on the information in the scope

In my project, I am facing an issue with a directive nested within an ng-repeat. The ng-repeat item is passed to the directive and I am trying to generate a directive template or templateUrl with dynamic elements based on a key/value in the item. Specifica ...

javascriptangularjstwitter-bootstrap

Angular Controller setup

One common question that often arises is whether placing 'ng-controller' under 'ng-app' in the HTML file negates the need to register the controller in JavaScript. Does it create any issues if the controller is scoped under 'ng-app ...

angularjscontroller

Refreshing information in the MongoDB database

I found a file named Musicians.js that includes the following code snippet: exports.update = function(req, res) { var id = req.params.id; console.log("ID-->" + id); //I GET CORRECT ID HERE var updates = req.body; //It does not update any records ...

angularjsnode.js

What is the best way to display a list of items in Vue JS while maintaining the

Looking to display my Vue.js list in reverse order using v-for without altering the original object. The default HTML list displays from top to bottom, but I want to append items from bottom to top on the DOM. Telegram web messages list achieves this wit ...

javascriptangularjsdomvue.js

Using AngularJS to prevent HTML injection in input fields

Is there an effective method to prevent HTML injection in input fields? As an example, if I have a search input field: <input id="search" type="text" ng-model="search" placeholder="search..."> I want to ensure that any attempts to input malicious c ...

javascripthtmlangularjs

Issue with Ionic.io and Firebase on Android: Connection terminated due to browser going offline

It appears there is a conflict between the Ionic.io platform web client and Firebase when used on Android devices, although it works fine in the browser and on iPhone. To recreate the issue, follow these steps: ionic start test-app cd test-app ionic plat ...

androidangularjsfirebaseionic-framework

Avoiding code duplication in Angular: tips for optimizing functions

Is there a way to avoid repeating the same for loop for a second variable and use only one? I'm trying to apply the "Don't repeat yourself" method here. Should I consider using an array? JS: var app=angular.module('xpCalc', []); app.c ...

javascripthtmlangularjsfunctiondry

Angular 1.4.8 Issue: [$injector:modulerr]

I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...

javascripthtmlangularjs

Exploring the power of protractor through the implementation of loops

Within my Protractor loop, the loop index (i) is not behaving as expected. Issues: Error: Index out of bound. Attempting to access element at index:'x', but there are only 'x' elements or The index remains static and always equ ...

angularjsselenium-webdriverpromiseprotractor

I keep receiving an error in Angular JS but I'm unsure of the reason

I've been working on AngularJS and created a basic module and controller. I'm attempting to show the data of an element inside the controller on the HTML view page, but all I see is {{student.name}} and I'm receiving an error message that sa ...

javascripthtmlangularjs

Combining ng-repeat with the float property set to left

I am attempting to create two rows of divs using ng-repeat. Each div is styled with a float: left attribute, and at the end, I add a clearing div with clear: both. <div class="interval" ng-repeat="interval in intervals"> <div class="text-cen ...

htmlcssangularjs

Compiling a template with the same class as a directive is not possible, even when the directive is declared as restrict "E"

Let's consider a scenario where there is a directive named "foo": app.directive("foo", function($compile) { var innerTemplate = $compile('<div class="foo"></div>'); return { restrict: "E"; }; })); It seems s ...

angularjsangularjs-directive

The javascript file jquery-ui-1.10.4.custom.js is encountering an issue with the error message 'this.source is not a function'

I am encountering an error while using 'jquery-ui-1.10.4.custom.js' for auto-complete. The error being thrown is 'TypeError: this.source is not a function' Here is the HTML code snippet: <input type="text" ng-model="srchfname" auto ...

jqueryangularjsjquery-uispring-mvc

Utilizing ng-repeat and ng-if to display dynamic data fetched from the server

I have social media icons with a like button that turns red only if item.like== 1, or remains white if item.userid==0. I am updating this dynamically and need to call the function profileData() again when a user clicks the like button. However, every time ...

angularjsangularjs-ng-repeatangular-ng-ifangularjs-ng-show

Which one should you begin with: AngularJS or Angular 2?

Interested in learning Angular and curious about the differences between Angular, AngularJS, and Angular 2. Should I focus on educating myself on Angular or go straight to Angular 2, considering it's now in beta version? Is there a significant differ ...

javascriptangularjsangular

Leveraging the reset function with the $meteor.object

Currently, I am working on a straightforward controller utilizing the angular-meteor starter project. controller("PartyDetailsCtrl", function($scope, $stateParams, $meteor) { $scope.party = $meteor.object(Parties, $stateParams.partyId); $scope.save = ...

javascriptangularjsmeteor

Updating ngModel using the value retrieved from a service call

After experiencing dissatisfaction with Angular's form validation, I decided to develop my own solution. However, I have encountered a perplexing issue that has me at a loss. Here is how my setup looks: I employ a directive to create a new form. Th ...

javascriptangularjs