Изменения состояния ng-класса, но не обновление классов

У меня очень странная проблема. Я должен установить класс active в соответствующем <li>, когда $scope.selectedCat == cat.id. Список генерируется с помощью ng-repeat. Если selectedCat является ложным, элемент списка "Просмотреть все категории" (за пределами 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 оценивается правильно, но ng-класс не обновляет классы соответственно:

<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. В последней строке активный не установлен, а ng-class - true.

Любые идеи, почему это не работает? Каков правильный способ Angular сделать это?

Ответы

Ответ 1

Заменить:

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

С

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

Вам никогда не нужно вставлять эти фигурные скобки, как в Angular.

Посмотрите ng-class документацию на несколько примеров.

Ответ 2

Вместо

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

использовать

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

Ответ 3

Привет, я тоже сталкиваюсь с той же проблемой. Я решил проблему, вместо того, чтобы назначать значение непосредственно ng-классу, вызывать отдельный метод и возвращать значение.

ex:

ng-class="getStyleClass(cat)"

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

грубо кодируется. пожалуйста, измените способ согласно вашему требованию.

Ответ 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}"

это поможет вам