CODEWITHSUNDEEP
javascriptangularjsangularjs-scopetoggle
João
João

Reputation: 633

How to make a list of items individually toggleable with Angular JS?

Here's a basic example of toggling a list of buttons, basically by doing ng-click="selected = !selected" in each of them. This means that by pressing one button, selected will be updated in all buttons at once, because it's set in the $scope.

There are two things I'd like to do: a) what would be an elegant way of toggling each individual button without updating all at once, and then b) keep those currently selected in an object in $scope? I want these buttons to act as real-time filters: hitting one of them should toggle it in a $scope object that contains only the selected filters.

Upvotes: 0

Views: 213

Answers (1)

j_buckley
j_buckley

Reputation: 1936

I suggest setting up an ng-click function inside a controller to handle both of these at once. To toggle the buttons individually give each one its own unique variable within selected like I've done below. To add the button to an object of selected buttons you need to set up a controller with a function called with ng-click where you add or remove the button from the object.

<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>

Upvotes: 2

Related Questions