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 — noypi
– noypi, Commented Oct 15, 2014 at 9:04
possible duplicate of What is the best way to conditionally apply a class? — Nobal Mohan
– Nobal Mohan, Commented Dec 12, 2014 at 12:51

Arun Ghosh · Accepted Answer · 2014-10-15 07:01:09Z

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, 2014 at 7:01

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

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

Comments

Nobal Mohan · Accepted Answer · 2014-11-07 12:03:53Z

0

       <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

answered Nov 7, 2014 at 12:03

Nobal Mohan

4867 silver badges21 bronze badges

Comments

lukkea · Accepted Answer · 2015-04-25 12:35:26Z

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, 2015 at 12:35

lukkea

3,6242 gold badges39 silver badges52 bronze badges

answered Oct 15, 2014 at 7:30

Archana

3871 silver badge5 bronze badges

Collectives™ on Stack Overflow

Angular js scope variable inside ng-class?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related