thay đổi điều kiện ng-class, nhưng không cập nhật các lớp học

Question

Tôi có một vấn đề rất lạ. Tôi phải đặt một lớp học active trên <li> thích hợp khi số $scope.selectedCat == cat.id. Danh sách được tạo bằng ng-repeat. Nếu selectedCat là sai, mục danh sách 'Duyệt Tất cả Danh mục' (bên ngoài ng-lặp lại) được đặt thành hoạt động. setCat() đặt giá trị của biến $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> 

Khi tải trang web, mọi thứ hoạt động tốt (ảnh chụp từ 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}"> 

Tuy nhiên khi tôi đặt $ scope.selectedClass đến một giá trị cat.id, các điều kiện trong ng-class được đánh giá đúng, nhưng ng-class sẽ không cập nhật các lớp học cho phù hợp:

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

Xin lưu ý t mũ trong dòng hoạt động đầu tiên vẫn được thiết lập, trong khi ng-class đánh giá sai. Trong dòng cuối cùng hoạt động không được thiết lập, trong khi ng-class đánh giá là true.

Bất kỳ ý tưởng nào tại sao nó không hoạt động? Cách góc chính xác để làm điều này là gì?

Answer 1

Thay thế:

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

Với:

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

Bạn không bao giờ cần phải tổ những dấu ngoặc nhọn như vậy, trong góc.

Hãy xem ng-class documentation để biết thêm một số ví dụ.

Answer 2

Thay vì

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

sử dụng

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

Answer 3

Hi tôi cũng đang phải đối mặt với cùng một vấn đề. tôi giải quyết vấn đề bằng cách thay vì gán giá trị trực tiếp cho ng-class, gọi phương thức riêng và trả về giá trị.

ví dụ:

ng-class="getStyleClass(cat)" 

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

khoảng i mã. xin vui lòng thay đổi phương pháp theo yêu cầu của bạn.

Answer 4

Mở rộng trên câu trả lời @Cerbrus cho:

Thay thế:

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

Với:

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

Tôi đã có một vấn đề với một biểu thức sử dụng af ilter, mà sẽ không đánh giá đúng cách mà không có dấu ngoặc nhọn đôi {{ }}.

Ví dụ: ng-class="{'active': {{ selectedCat | filter:catType }} == cat.id}"

Tôi giải quyết nó bằng cách đặt dấu ngoặc đơn thay vì dấu ngoặc nhọn.

Giải pháp: ng-class="{'active': (selectedCat | filter:catType) == cat.id}"