Creating a feature in Angular JS that allows for each item in a list to be toggled individually

Question

Creating a feature in Angular JS that allows for each item in a list to be toggled individually

Looking for a more efficient way to toggle individual buttons without updating all at once? Check out this basic example where each button toggles independently by using ng-click="selected = !selected". Instead of updating all buttons at once, you can achieve individual toggling for each button.

Additionally, you can maintain the currently selected buttons in an object within the $scope. This allows the buttons to function as real-time filters, with each click adding or removing a filter from the $scope object. This way, only the selected filters are contained within the object.

javascript angularjs angularjs-scope toggle

Answer 1

Answer №1

If you want to simplify toggling multiple buttons at once, consider creating an ng-click function within a controller. By assigning each button a unique variable within selected, you can easily toggle them individually. To include the button in a collection of selected buttons, set up a controller with an ng-click function that adds or removes the button from the collection.

<body ng-app>
  <ul>
    <li>
      <button data-active="{{ selected.a }}" ng-click="selected.a = !selected.a">Item 1 is {{ selected.a }}</button>
    </li>
    <li>
      <button data-active="{{ selected.b }}" ng-click="selected.b = !selected.b">Item 2 is {{ selected.b }}</button>
    </li>
    <li>
      <button data-active="{{ selected.c }}" ng-click="selected.c = !selected.c">Item 3 is {{ selected.c }}</button>
    </li>
  </ul>
</body>

Answer 2

If you want to simplify toggling multiple buttons at once, consider creating an ng-click function within a controller. By assigning each button a unique variable within selected, you can easily toggle them individually. To include the button in a collection of selected buttons, set up a controller with an ng-click function that adds or removes the button from the collection.

<body ng-app>
  <ul>
    <li>
      <button data-active="{{ selected.a }}" ng-click="selected.a = !selected.a">Item 1 is {{ selected.a }}</button>
    </li>
    <li>
      <button data-active="{{ selected.b }}" ng-click="selected.b = !selected.b">Item 2 is {{ selected.b }}</button>
    </li>
    <li>
      <button data-active="{{ selected.c }}" ng-click="selected.c = !selected.c">Item 3 is {{ selected.c }}</button>
    </li>
  </ul>
</body>

Creating a feature in Angular JS that allows for each item in a list to be toggled individually

Answer №1

Similar questions

Having an issue with the Show/Hide Javascript toggle on the same page. Multiple hidden texts are appearing simultaneously. Seeking a solution without the use of JQuery

Vue parent component not receiving events properly

If the condition is false, the Bootstrap 4 carousel will not transition to another slide

Structure of directories in NodeJS

Unable to retrieve data function properties within Vue.Js Component methods

What is the best way to access data from this $scope in AngularJS?

What are the implications of an unidentified callback function with parameters?

PHP variables that are constantly changing

Ways to restrict the maximum length in Draft.js

Getting the selected value from a dropdown menu in ReactJS

Update the JSON data following deletion

Creating a reusable function for making HTTP requests in Angular

Fill in input field based on choice from the drop-down menu - JavaScript

Navigating through the various iterations of jQuery

Creating an HTTP request inside an Export Function in a MEANJS application

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

Guide for building a Template-driven formArray in Angular

Grab the div, position it accurately, and initiate an ajax call

A loop that iterates through only the initial element of an array

What is preventing WebRTC from re-establishing connection after being disconnected?