CODEWITHSUNDEEP
javascripthtmlangularjs
captainrad
captainrad

Reputation: 3830

angularjs toggle class on condition

<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

Upvotes: 2

Views: 2058

Answers (2)

alexandrin88
alexandrin88

Reputation: 4400

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

Upvotes: 3

Davin Tryon
Davin Tryon

Reputation: 67336

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>

Upvotes: 2

Related Questions