Javascript ng-class 条件改变，但不更新类

ng-class condition changes, but not updating classes

提问by orszaczky

I have a very strange issue. I have to set an activeclass on the appropriate <li>when the $scope.selectedCat == cat.id. The list is generated with ng-repeat. If selectedCat is false, the 'Browse All Categories' list item (outside of ng-repeat) is set to active. setCat()sets the value of the $scope.selectedCatvariable:

我有一个很奇怪的问题。我必须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>

When the page loads, everything works fine (snapshot from FireBug):

当页面加载时，一切正常（来自 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}">

However when I set $scope.selectedClass to a cat.idvalue, the condition within ng-class gets evaluated correctly, but ng-class won't update the classes accordingly:

但是，当我将 $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}">

Please note that in the first line active class stays set, while ng-class evaluates to false. In the last line active is not set, while ng-class evaluates to true.

请注意，第一行 active class 保持设置，而 ng-class 评估为 false。在最后一行中，没有设置 active，而 ng-class 评估为 true。

Any ideas why it doesn't work? What's the correct Angular way of doing this?

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

回答by Cerbrus

Replace:

代替：

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

With:

和：

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

You never need to nest those curly braces like that, in Angular.

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

Have a look at the ng-classdocumentationfor some more examples.

查看ng-class文档以获取更多示例。

回答by Arun Ghosh

Instead of

代替

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

use

用

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

回答by Bharath Pazhani

Hi i'm also facing the same problem. i solved the problem by the way instead of assigning the value directly to ng-class, call the separate method and return the value.

嗨，我也面临同样的问题。我顺便解决了这个问题，而不是直接给ng-class赋值，调用separate方法并返回值。

ex :

前任 ：

ng-class="getStyleClass(cat)"

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

roughly i coded. please change the method as per your requirement.

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

回答by Tom

Expanding on the answer @Cerbrus gave:

扩展@Cerbrus给出的答案：

Replace:

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

With:

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

代替：

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

和：

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

I had an issue with an expression using a filter, that would not evaluate properly without double curly braces {{ }}.

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

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

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

I solved it by putting parentheses instead of curly braces.

我通过放置括号而不是花括号来解决它。

Solution: ng-class="{'active': ( selectedCat | filter:catType ) == cat.id}"

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

回答by angularjs

Did you solve it?

你解决了吗？

In my opinion you should use

在我看来你应该使用

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

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

With:

和：

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

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

this will help you.

这会帮助你。