What is the most efficient way to dynamically add a class to multiple elements in AngularJS using ng-click?

Question

What is the most efficient way to dynamically add a class to multiple elements in AngularJS using ng-click?

On my HTML page, I have 2 lists that I want to modify so that when an option is clicked, it adds a class altering the background-color of the li element to red. If the same option is clicked again, it removes the class and reverts back to white:

This is the current structure of the lists in my HTML template:

List A

<ul>
    <li>Something 1</li>
    <li>Something 2</li>
</ul>

List B

<ul>
    <li>Otherthing A</li>
    <li>Otherthing B</li>
    <li>Otherthing C</li>
</ul>

Currently, I am using individual expressions for each li element along with separate $scope variables that track true or false values. For example: $scope.otherthingaclicked = true, $scope.otherthingbclicked = true, $scope.otherthingcclicked=false, etc.

<li ng-class="expression">Otherthing A</li>

I believe there must be a more efficient way to handle this. What is a better approach to make this functionality smarter?

javascript angularjs

Answer 1

Answer №1

A more efficient solution exists for this problem. Utilizing Angular directives can help achieve the desired outcome:

myApp.directive("toggleClass", function() {
    return {
        link: function($scope, element, attr) {
            element.on("click", function() {
                element.toggleClass("option-selected");
            });
        }
    }
});

Next, implement it on your li elements:

<ul>
    <li toggle-class>Something 1</li>
    <li toggle-class>Something 2</li>
</ul>

Lastly, add the following CSS rules:

li.option-selected {
    background: red;
}

var myApp = angular.module("sa", []);

myApp.directive("toggleClass", function() {
  return {
    link: function($scope, element, attr) {
    element.on("click", function() {element.toggleClass("option-selected");});}});

li.option-selected {background: red;}

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

<ul ng-app="sa">
  <li toggle-class>Something 1</li>
  <li toggle-class>Something 2</li>
  <li toggle-class>Something 3</li>
  <li toggle-class>Something 4</li>
</ul>

Answer 2

A more efficient solution exists for this problem. Utilizing Angular directives can help achieve the desired outcome:

myApp.directive("toggleClass", function() {
    return {
        link: function($scope, element, attr) {
            element.on("click", function() {
                element.toggleClass("option-selected");
            });
        }
    }
});

Next, implement it on your li elements:

<ul>
    <li toggle-class>Something 1</li>
    <li toggle-class>Something 2</li>
</ul>

Lastly, add the following CSS rules:

li.option-selected {
    background: red;
}

var myApp = angular.module("sa", []);

myApp.directive("toggleClass", function() {
  return {
    link: function($scope, element, attr) {
    element.on("click", function() {element.toggleClass("option-selected");});}});

li.option-selected {background: red;}

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

<ul ng-app="sa">
  <li toggle-class>Something 1</li>
  <li toggle-class>Something 2</li>
  <li toggle-class>Something 3</li>
  <li toggle-class>Something 4</li>
</ul>

Answer 3

Answer №2

Do you plan on utilizing (or storing) the outcome of which li elements the user has selected? If so, it may be necessary to save a boolean value for each individual li element.

//JavaScript
$scope.listA = [
    { label: "Item 1", isActive: false },
    { label: "Item 2", isActive: false },
    { label: "Item 3", isActive: false }
];

Subsequently, you can utilize a combination of ng-repeat and ng-click to manage the functionality.

<!-- HTML -->
<ul>
    <li ng-repeat="item in listA" ng-class="{ 'active': item.isActive }">
        <a href="javascript://" 
            ng-click="item.isActive = !item.isActive">{{item.label}}</a>
    </li>
</ul>

Answer 4

Do you plan on utilizing (or storing) the outcome of which li elements the user has selected? If so, it may be necessary to save a boolean value for each individual li element.

//JavaScript
$scope.listA = [
    { label: "Item 1", isActive: false },
    { label: "Item 2", isActive: false },
    { label: "Item 3", isActive: false }
];

Subsequently, you can utilize a combination of ng-repeat and ng-click to manage the functionality.

<!-- HTML -->
<ul>
    <li ng-repeat="item in listA" ng-class="{ 'active': item.isActive }">
        <a href="javascript://" 
            ng-click="item.isActive = !item.isActive">{{item.label}}</a>
    </li>
</ul>

What is the most efficient way to dynamically add a class to multiple elements in AngularJS using ng-click?

Answer №1

Answer №2

Similar questions

Will the .replaceWith() method alter the code visible to search engines?

Leveraging AngularJS and ng-map to incorporate interactive dynamic heatmap displays

Tips for implementing pagination in a search result by adjusting the skip and limit values within the same query

AngularJS/Bootstrap: Tips for keeping accordion-heading at the top during scrolling

I'm encountering a type error stating that children are not defined when attempting to establish parent-child relationships from a flat array. What

"Seeking clarification on submitting forms using JQuery - a straightforward query

When executing a Javascript POST request to a PHP script, it succeeds when running on

The Vue v-bind:class feature does not always update immediately when the value of the binded object is changed

Conceal the results of echoing json_encode

How can AJAX be used for form validation prior to submission?

What steps should I take to address the issue of fixing the classname rather than using the

Navigating URL to switch data access

Is it possible to set environment variables in Next.js outside of the pages directory?

Push function is not available in Redux

Instructions for including packages in .vue files

Calculating the mean value of the numbers provided in the input

Challenges encountered in exporting functions with Webpack 5

Require assistance with displaying a menu on a website using JQuery

JavaScript's wildcard character, *, in a regular expression will always match something

Display a specific section depending on the user's input by utilizing either ng-if or ng-show