masSdev masSdev - 11 months ago 86
AngularJS Question

Customize using ng-class angular js

I have two css classes

.caret .right
.caret .down
this is my code

<span> ng-class="{'caret right': checkboxer[mainParent]==true,'caret down': checkboxer[mainParent]==false}" </span>

and my css

.caret .right{transform: rotate(270deg);}.caret .down{transform:rotate(360deg);}

the caret class is from bootstrap.
Its not affecting my span ? What error i have done?

Answer Source

Here is the working plunk.

  <div ng-click="toggle()">
    <span ng-class="{'right-caret':checkbox,'caret': !checkbox}"></span> Caret

Another simpler Approch

class="caret {{checkboxer[mainParent] ? 'right' : 'down'}}"

Working Fiddle