CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-clickng-class
Daimz
Daimz

Reputation: 3281

Adding and removing a class from parent div AngularJS

I have 3 boxes each with it's own button. The button is used to collapse it's parent div by adding a class of 'collapsed' to the parent. I have go the classes being added but I need to get them working independently of the other boxes, so that box1 will not be effected if it is closed and I click on box2 and the same would go for box 3. They would only ever open and close their respective div but adding and remove the class from that boxes parent only.

I have set up and example here

<div ng-class="{'collapsed':1==collapsed}" class="box box-1"><a ng-click="click(1)" class="btn btn-primary"><span class="caret"></span></a></div>
<div ng-class="{'collapsed':2==collapsed}" class="box box-2"><a ng-click="click(2)" class="btn btn-primary"><span class="caret"></span></a></div>
<div ng-class="{'collapsed':3==collapsed}" class="box box-3"><a ng-click="click(3)" class="btn btn-primary"><span class="caret"></span></a></div>

Upvotes: 1

Views: 827

Answers (1)

Chandermani
Chandermani

Reputation: 42669

Since you need to track the state of the boxes independently you need 3 variables for that. See my updated copepen

http://codepen.io/anon/pen/xyrHL

The item now looks like this

.box.box-1(ng-class="{'collapsed':collapsed1}")
    a.btn.btn-primary(ng-click="collapsed1=!collapsed1;click(1)")
      span.caret

Upvotes: 1

Related Questions