ng-class条件更改,但不更新类

Question

我有一个非常奇怪的问题.我必须active在适当的<li>时候设置一个类$scope.selectedCat == cat.id.该列表使用ng-repeat生成.如果selectedCat为false,则"浏览所有类别"列表项(在ng-repeat之外)将设置为活动状态.setCat()设置$scope.selectedCat变量的值:

<div id="cat-list" ng-controller="CatController">
    <li ng-class="{'active': {{selectedCat == false}}}">
        <a>
            <div class="name" ng-click="setCat(false)" >Browse All Categories</div>
        </a>
    </li>
    <li class="has-subcat" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': {{selectedCat == cat.id}}}">
        <a>
            <div cat class="name" ng-click="setCat({{cat.id}})" ng-bind-html="cat.name | highlight:catsearch"></div>
        </a>
    </li>
</div>

当页面加载时,一切正常(来自FireBug的快照):

<li ng-class="{'active': true}" class="ng-scope active">
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': false}">

但是,当我将$ scope.selectedClass设置为某个cat.id值时,ng-class中的条件会被正确计算,但ng-class不会相应地更新类:

<li ng-class="{'active': false}" class="ng-scope active"> <!--Right here!-->
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': true}">

请注意,在第一行中,活动类保持设置,而ng-class的计算结果为false.在最后一行中,未设置active,而ng-class的计算结果为true.

任何想法为什么它不起作用？这样做的正确Angular方式是什么？

Answer 1

更换:

ng-class="{'active': {{selectedCat == cat.id}}}"

附:

ng-class="{'active': selectedCat == cat.id}"

在Angular中,你永远不需要像那样嵌套那些花括号.

有关更多示例,请查看ng-class文档.

Answer 2

代替

ng-class="{'active': {{selectedCat == cat.id}}}"

使用

ng-class="{active: selectedCat == cat.id}"

Answer 3

嗨,我也面临同样的问题.我顺便解决了问题,而不是直接将值赋给ng-class,调用单独的方法并返回值.

例如:

ng-class="getStyleClass(cat)"

$scope.getStyleClass = function(cat)  {   
      return "active: selectedCat == cat.id";  
}

粗略地我编码.请根据您的要求更改方法.