使用ng-class angular js自定义

Question

我有两个css类.caret .right和.caret .down这是我的代码

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

和我的css

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

插入符类来自bootstrap。 它不影响我的跨度？我做了什么错误？

Answer 1

如果checkboxer[mainParent]返回一个布尔值，那么这就是解决方案。

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

</span>

Answer 2

这是工作插头。

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

另一个更简单的Approch

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

Working Fiddle