Angular js scope variable inside ng-class?

Question

How add a scope variable inside ng-class ? is it possible to combine ng-class and class together with scope variable ?

I am building an accordion. So I need to have unique "isopen" class, say isopne1, isopen2, etc.. for each accordion to work.

<accordion-heading>
  {{list.name}}<i class="pull-right glyphicon" ng-class="{'icon-arrow-down-solid': isopen, 'icon-arrow-right-solid': !isopen}"></i>
</accordion-heading>

The above code is in ng-repeat. How can I set something like this

ng-class="{'icon-arrow-down-solid': isopen{{list.value}}, 'icon-arrow-right-solid': !isopen{{list.value}}}"

isopen{{set.value}} <--- surround your function with parenthesis — sss, Oct 15 '14 at 09:04
possible duplicate of [What is the best way to conditionally apply a class?](http://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class) — Nobal Mohan, Dec 12 '14 at 12:51

score 1 · Answer 1 · answered Oct 15 '14 at 07:01

1

Use scope function

ng-class="{'icon-arrow-down-solid': isopen(set.value), 'icon-arrow-right-solid': is_not_open(set.value)}"

answered Oct 15 '14 at 07:01

Arun Ghosh

7,634
1
26
38

score 0 · Answer 2 · edited Apr 25 '15 at 12:35

0

your code itself will work fine depending upon the scope variable (isOpen flag) you want to add the css class to the "i" element correct.Create a scope variable (isOpen flag) in the controller.Then depending upon the isOpen flag automatically the icon will change

edited Apr 25 '15 at 12:35

lukkea

3,606
2
37
51

answered Oct 15 '14 at 07:30

Archana

387
1
5

score 0 · Accepted Answer · answered Nov 07 '14 at 12:03

       <accordion close-others="oneAtATime">
        <accordion-group ng-repeat="set in sets" ng-init="status = $first" is-open="status" class="witlistcontents">
            <accordion-heading>
                Name <i class="pull-right glyphicon" ng-class="{'icon-arrow-down-solid': status, 'icon-arrow-right-solid': !status}"></i>
            </accordion-heading>
            <accordion-body>
            </accordion-body>
        </accordion-group>
       </accordion>

Correct way to givie icon class for accordion inside ng-repeat

Angular js scope variable inside ng-class?

3 Answers3