How to dynamically change content of the classin an Angular JS?

Question

I am trying to dynamically change the class name when a showPending function called . I don't know how to achieve that through angular js.

<li data-match-route="pending" ng-class='menuactive'><a href="javascript:void(0)" ng-click="showPending()" >Pending</a></li>

Patrick · Accepted Answer · 2014-08-05 07:21:11Z

2

You can specify what class should be applied with an expression, as explained in the docs; AngularJS: API: ngClass

<li data-match-route="pending"
    ng-class="{menuactive: expression}">
      <a href="javascript:void(0)" ng-click="showPending()" >Pending</a>
</li>

set expression in your controller in your showPending function, and the css class will be updated accordingly.

answered Aug 5, 2014 at 7:21

Patrick

18k6 gold badges73 silver badges85 bronze badges

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

Comments

Harsh · Accepted Answer · 2014-08-05 07:25:17Z

0

You can use ng-class directive for that. In your function which is getting called set an expression named "value" as true or false, which you will use in ng-class as mentioned in following example.

    <li data-match-route="pending" ng-class="{menuactive:value}">
<a href="javascript:void(0)" ng-click="showPending()" >Pending</a></li>

answered Aug 5, 2014 at 7:25

Harsh

1,7051 gold badge10 silver badges16 bronze badges

2 Comments

Patrick Over a year ago

How is this different from the other answer?

Harsh Over a year ago

I saw it late. Refresh issues. :)

Collectives™ on Stack Overflow

How to dynamically change content of the classin an Angular JS?

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related