Change default conditional css class with angularjs

Question

I would like to style a text by its length. So true is red and false is green. I use ng-class with expression. It's possible to change the css after a user click?

This is a plunkr: http://plnkr.co/edit/ndCqpZaALfOEiYieepcn?p=preview

<div>
 <p ng-class="{true:'green',false:'red'}[name.length>3 && toggle]">{{name}}</p>

 <p><b>Length: </b> {{name.length}} character(s)</p>

 <button ng-click="toggle=!toggle">Toggle class</button> 
</div>

don't you have to make a controller function for ng-click? Does inline code work? — Thilo
– Thilo, Commented Sep 11, 2013 at 1:00

carols10cents · Accepted Answer · 2013-09-11 02:05:53Z

1

Initially, toggle is undefined, which I think is causing an error when evaluating the expression [name.length>3 && toggle]. Then when you click the button, the opposite of undefined is true, so then your toggle starts working as you expect.

To fix this, you can use ng-init to evaluate an expression before the views are processed.

For example, if you change your div to be:

<div ng-init="toggle = true">

then the class starts out as green initially.

answered Sep 11, 2013 at 2:05

carols10cents

7,0127 gold badges41 silver badges58 bronze badges

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

1 Comment

Tropicalista Over a year ago

In the documentation I never noticed this ng-init...Thanks a lot

Collectives™ on Stack Overflow

Change default conditional css class with angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related