web-dev-qa-db-ja.com

ng-class条件は変更されますが、クラスは更新されません

非常に奇妙な問題があります。 _<li>_の場合、適切な_$scope.selectedCat == cat.id_に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はfalseと評価されることに注意してください。最後の行では、アクティブは設定されていませんが、ng-classはtrueと評価されます。

なぜ機能しないのでしょうか？正しいAngularこれを行う方法は何ですか？

javascriptangularjsng-class
27
orszaczky

交換：

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

と：

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

そのような中括弧をAngularにネストする必要はありません。

ng-class documentation その他の例.

35
Cerbrus

の代わりに

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

つかいます

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

こんにちは、私も同じ問題に直面しています。値を直接ng-classに割り当て、別のメソッドを呼び出して値を返す代わりに、問題を解決しました。

例：

ng-class="getStyleClass(cat)"

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

大体コード化されています。要件に応じて方法を変更してください。

5
Bharath Pazhani

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

1
Tom

解決しましたか？

私の意見では、使用する必要があります

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

と：

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

これはあなたを助けます。

0
angularjs