masSdev masSdev - 1 month ago 18
AngularJS Question

Customize using ng-class angular js

I have two css classes

.caret .right
and
.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

Here is the working plunk.

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

Another simpler Approch

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

Working Fiddle

Comments