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

transferring information from one page to another using the navigator in the success function of an ajax

Distributing your React component on npm

Managing the file order within subdirectories for Rails assets

Combining pdfmake with AngularJS and Electron results in the generation of a new PDF document

JavaScript - Modifying several object properties within an array of objects

The onChange method in React is failing to execute within the component

The input type file is not correctly inserting an image into the image tag

Using TypeScript to Add Items to a Sorted Set in Redis

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Using JQuery to retrieve part of a className results in a null value being returned

Display the element when the input is in focus

Harnessing the power of service binding in AngularJS

Expand the scope of the javascript in your web application to cater

Toggle Jquery feature will dynamically add the "required" attribute to the input field when the specified div is visible, and it will automatically remove the attribute when the div

The <mat-radio-button> component does not have a value accessor specified

Sending chosen choice to controller method

The response from NodeJS is not being properly parsed by Express or BodyParser

Error: Invalid parameter detected for Shopify script-tag

Expo running into issues with recognizing .jsx files when using Jest

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after