ng-class 조건은 변경되지만 클래스는 갱신되지 않음

ng-class 조건은 변경되지만 클래스는 갱신되지 않음

나는 매우 이상한 문제가 있다.세팅해야 합니다.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를 설정했을 때.selected Class to acat.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로 평가되는 동안 active는 설정되지 않습니다.

왜 안 되는지 알아?Angular의 올바른 방법은 무엇입니까?

대체:

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

포함:

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

그렇게 곱슬곱슬한 교정기를 앵글에 둘 필요는 없어

그 외의 예에 대해서는, 메뉴얼을 참조해 주세요.

대신

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

사용하다

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

안녕 나도 같은 문제에 직면해 있어.ng-class에 직접 값을 할당하는 대신 다른 메서드를 호출하여 값을 반환하는 방법으로 문제를 해결했습니다.

ex:

ng-class="getStyleClass(cat)"

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

대략적으로 코드화했어당신의 요구에 따라 방법을 변경해 주세요.

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

풀었어?

내 생각에 당신은 다음을 사용해야 한다.

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

포함:

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

이게 도움이 될 거야

언급URL : https://stackoverflow.com/questions/26094084/ng-class-condition-changes-but-not-updating-classes