angularjs toggle class on condition

Question

<li ng-click="visible = !visible" ng-class="{'strike': !visible, 'none': visible}" ng-repeat="peep in peeps">{{peep.name}}</li>

This code above allows me to click on each repeated li and conditionally set the class .strike to each.

What I am working on is a 'mass' toggle for these list items that will also allow me to apply the .strike class to all list items except the one selected via a select element.

I am sure it is a scope issue but I am unable to achieve this for some reason. What am I missing?

http://plnkr.co/edit/zuEu6jxTfTjqRyEfYQrz?p=preview

alexandrin88 · Accepted Answer · 2014-02-06 23:47:45Z

3

Each ng-repeat iteration creates a new scope so the visible property is locked inside the current repeat scope. You ng-repeat on the options also creates a new scope for each iteration but the visible property is not shared with the previous ng-repeat scope, they are entirely different scopes.

Here is a bit of a different approach on the solution given by Davin Tryon.

http://plnkr.co/edit/b6QlHUuSWgeoeLHrXCJ0?p=preview

answered Feb 6, 2014 at 23:47

alexandrin88

4,3903 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Davin Tryon · Accepted Answer · 2014-02-06 23:29:44Z

2

Here is an updated plunker.

To make this work, you need to make visible a property of the data item. Then, you can toggle its state instead of just loosely scoped values.

<body>
  <h3>using ng-repeat:</h3>
  <p>(click a name to cross it out)</p>
    <div ng-init="peeps = [
      {name:'John', age:25, gender:'boy', visible:true},
      {name:'Jessie', age:30, gender:'girl', visible:true},
      {name:'Johanna', age:28, gender:'girl', visible:true},
      {name:'Joy', age:15, gender:'girl', visible:true},
      {name:'Mary', age:28, gender:'girl', visible:true},
      {name:'Peter', age:95, gender:'boy', visible:true},
      {name:'Sebastian', age:50, gender:'boy', visible:true},
      {name:'Erika', age:27, gender:'girl', visible:true},
      {name:'Patrick', age:40, gender:'boy', visible:true},
      {name:'Samantha', age:60, gender:'girl', visible:true}
    ]"></div>
      <ul ng-init="visible = true">
        <li ng-click="peep.visible = !peep.visible" ng-class="{'strike': !peep.visible, 'none': peep.visible}" ng-repeat="peep in peeps">{{peep.name}}</li>
      </ul>
    <div>
      <span>select only:</span>
      <select ng-model="selectedPeep" ng-change="peeps[selectedPeep].visible = !peeps[selectedPeep].visible">
        <option ng-repeat="peep in peeps" ng-value="$index">{{peep.name}}</option>
      </select>
      <span>{{changed.name}}</span>
    </div>
  </body>

answered Feb 6, 2014 at 23:29

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

3 Comments

alexandrin88 Over a year ago

That's good, but he wants to strike all the items except the one selected on change :)

Davin Tryon Over a year ago

should be easy to build a function that does that from here. I'm out of battery!! Just need to build a function that loops all and call it in the ng-change.

alexandrin88 Over a year ago

Yepp, shouldn't be a problem. :)

Collectives™ on Stack Overflow

angularjs toggle class on condition

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related