What would be the best way to implement a toggleClass feature within an AngularJS directive?

Question

What would be the best way to implement a toggleClass feature within an AngularJS directive?

Long before discovering Angular and jQuery, my go-to was good old plain Javascript like this:

function toggleClass(e, c) {
    var classes = e.className.split(' ');
    var match = false;
    for(var i=0; i<classes.length; i++) {
        if(classes[i] === c) {
            match = true;
            classes.splice(i,1);
            break;
        }
    }
    if(!match) classes.push(c);
    e.className = classes.join(' ');
}

I've utilized this in the past to toggle a class name within an onclick event like shown below:

<div onclick="toggleClass(this,'foo')"></div>

Check out this functional JSFiddle.

Now, how can I convert this into a directive in Angular?

javascript angularjs

Answer 1

Answer №1

If you want to style elements dynamically in AngularJs, consider using the ng-class directive instead of creating a new directive.

angular.module('demo', [])

  .controller('Ctrl', function($scope) {
     $scope.toggleRed = true;
  });

.box {
  padding: 50px;
  display: inline-block;
  background-color: #efefef;
}

.box.red-box {
  background-color: red;
}

<div ng-app="demo" ng-controller="Ctrl">
  
  <div class="box" 
       ng-class="{'red-box': toggleRed}" 
       ng-click="toggleRed = !toggleRed">Click Me</div>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 2

If you want to style elements dynamically in AngularJs, consider using the ng-class directive instead of creating a new directive.

angular.module('demo', [])

  .controller('Ctrl', function($scope) {
     $scope.toggleRed = true;
  });

.box {
  padding: 50px;
  display: inline-block;
  background-color: #efefef;
}

.box.red-box {
  background-color: red;
}

<div ng-app="demo" ng-controller="Ctrl">
  
  <div class="box" 
       ng-class="{'red-box': toggleRed}" 
       ng-click="toggleRed = !toggleRed">Click Me</div>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 3

Answer №2

Angular operates differently from jQuery, so focusing on adding or removing classes and showing or hiding elements is not the way to approach it.

If you come from a jQuery background, you may find some useful insights in this Stack Overflow post: "Thinking in AngularJS" if I have a jQuery background?

In Angular, the model dictates how the view behaves.

To achieve what you need, use the standard ng-class directive.

For example, imagine you have a grid of users and you want to highlight rows when a user clicks on them to indicate selection. You can define the row's HTML like this:

<tr ng-repeat='user in users' ng-click='user.selected=!user.selected' ng-class={'active': user.selected}>
</tr>

Now, the state of user.selected controls the view and toggles the class with each click.

Answer 4

Angular operates differently from jQuery, so focusing on adding or removing classes and showing or hiding elements is not the way to approach it.

If you come from a jQuery background, you may find some useful insights in this Stack Overflow post: "Thinking in AngularJS" if I have a jQuery background?

In Angular, the model dictates how the view behaves.

To achieve what you need, use the standard ng-class directive.

For example, imagine you have a grid of users and you want to highlight rows when a user clicks on them to indicate selection. You can define the row's HTML like this:

<tr ng-repeat='user in users' ng-click='user.selected=!user.selected' ng-class={'active': user.selected}>
</tr>

Now, the state of user.selected controls the view and toggles the class with each click.

What would be the best way to implement a toggleClass feature within an AngularJS directive?

Answer №1

Answer №2

Similar questions

Execute code after selecting the link

Hide the drawer when a user clicks on a currently selected tab

JavaScript Error - Unable to access 'getChartLayoutInterface' property of undefined in Google Charts

Embed a div element within a content-editable area

Using Javascript/jQuery to show measurements in the format of feet and inches

Switch Button Color in React Upon Adding to Favorites

What is the best way to retrieve user input from an HTML form and save it into a preexisting JavaScript array?

To ensure the react page is not rendered until the script has finished executing, follow these steps in React

AngularJS and Ionic Framework - Click on a specific row to interact with it

Can you explain the significance of the '.' in the state name within the AngularJS state provider?

Using Raycaster in ThreeJS to pick out faces from models loaded with STL Loader

How to incorporate and separate JavaScript syntax for individual objects

Can one button be clicked to trigger the activation of another button through a click?

Error: Rails javascript_include_tag is expecting one argument, but received two (2 for 1)

The drop-down list was designed with a main button to activate it, but for some reason it is not functioning properly. Despite numerous attempts, the list simply will not display as intended

Implementing a jQuery event listener for an event that requires another event as a parameter

Having trouble locating the bootstrap import statement

Encountering issues when integrating AngularUI with Bootstrap 3 wiring

Change the name of a file to a name chosen by the user while uploading it to an

Traverse through an array or object using recursive render functions in JavaScript