ng-class 条件更改，但不更新类答案

【问题标题】：ng-class condition changes, but not updating classesng-class 条件更改，但不更新类
【发布时间】：2014-11-23 12:03:56
【问题描述】：

我有一个非常奇怪的问题。当$scope.selectedCat == cat.id 时，我必须在适当的<li> 上设置active 类。该列表是使用 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 评估为假。在最后一行中，未设置 active，而 ng-class 的计算结果为 true。

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

【问题讨论】：

标签： javascript angularjs ng-class

【解决方案1】：

替换：

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

与：

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

在 Angular 中，您永远不需要像这样嵌套那些花括号。

查看ng-class documentation 了解更多示例。

【讨论】：

如果它是动态的，您也可以使用获取类名的函数，如果您需要以下类，这将有所帮助：active-1（和-1取决于其他东西），只是 concat 不会如果“-1”变为“-2”，则刷新。

【解决方案2】：

代替

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

使用

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

【讨论】：

我也删除了 单引号。你不需要围绕“活跃”。我不允许将其作为评论添加到您的答案中，这就是为什么将其作为单独的答案发布。抱歉，因为您感觉不好。

【解决方案3】：

您好，我也面临同样的问题。我顺便解决了问题，而不是直接将值分配给ng-class，调用单独的方法并返回值。

前：

ng-class="getStyleClass(cat)"

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

大概是我编码的。请根据您的要求更改方法。

【讨论】：

这太疯狂了。认为它的行为与使用 ng-class="{ true: 'active', false: 'muted' }[x == y]" 的 [well unknown] 语法时的行为相同。这种语法总是重新绑定/解除绑定类。
从头开始。这对我不起作用。它仍然将样式放在每个 [选定] 项目上，但是当 $scope.selected 更改（通过我的 isSelected(date) -> return this.selected === date）时，每个连续单击的项目都会在其他选择时保留此样式。

【解决方案4】：

扩展@Cerbrus 给出的答案：

替换：

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

与：

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

我遇到了一个使用过滤器的表达式的问题，如果没有双花括号 {{ }}，它将无法正确评估。

示例：ng-class="{'active': {{ selectedCat | filter:catType }} == cat.id}"

我用括号代替花括号解决了这个问题。

解决方案：ng-class="{'active': ( selectedCat | filter:catType ) == cat.id}"

【讨论】：

【解决方案5】：

你解决了吗？

我认为你应该使用

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

与：

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

这会对你有所帮助。

【讨论】：