javascript - 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}">

请注意，在第一行中，active class 保持设置状态，而 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 documentation更多示例。