ng-class không cập nhật khi cần sau khi hàm được gọi với ng-click được thực thi

Question

Tôi gặp vấn đề với ng-class trong AngularJS - nó không cập nhật đúng.

Xem:

<div class="cal-day" ng-repeat="day in schedule"> 
    ... 
    <div class="entry" ng-click="entryDetails(entry)" ng-repeat="entry in day.blockGrid" 
    ng-class="{'selected': isSelected(entry), 'bg-{{entry.color}}': entry, 'bg-empty': !entry}"> 
     {{isSelected(entry)}} 
     ... 
    </div> 
</div> 

JS:

$scope.entryDetails = function(entry) { 
    $scope.entryForDetails = entry; 
}; 

$scope.isSelected = function(entry) { 
    return $scope.entryForDetails === entry; 
}; 

CSS lớp chọn được thực hiện tốt - khi tôi thay isSelected (entry) với đúng trong ng-class, lớp được áp dụng đúng cách.
Cùng một điều với isSelected() chức năng - nó một cách chính xác in đúng hoặc sai tuỳ thuộc vào việc các mục được chọn.
Mặc dù cả hai yếu tố làm việc, họ bằng cách nào đó từ chối hợp tác với nhau, và lớp div không được cập nhật để chọn khi isSelected (entry) lợi nhuận đúng.

Edit:

mẫu lưu trữ trong ngày

{ 
    "date": "6.6.2013", 
    "blockGrid": [ 
     null, 
     null, 
     null, 
     null, 
     null, 
     null, 
     { 
     "group": "ABCD", 
     "subjectName": "AB CD", 
     "subjectShorthand": "PW", 
     "type": "c", 
     "number": 4, 
     "profName": "ABAB", 
     "date": "2013-06-05T22:00:00.000Z", 
     "venue": "329 S", 
     "timetableBlock": 7, 
     "color": 16, 
     "_id": "51c3a442eb2e46a7220000e2" 
     } 
    ] 
    } 

Như bạn thấy, nó là một mảng của 7 yếu tố đó là một trong hai null hoặc chứa một nhập đối tượng.

Tôi quên đề cập rằng phần đã đăng của chế độ xem của tôi nằm trong một ng-lặp lại khác. Xem đoạn mã ở trên hiện được mở rộng để phản ánh điều đó.

Answer 1

Ng-class, như bạn đã thiết lập, muốn đánh giá biểu thức boolean, biểu thức đầu tiên của bạn trong đối tượng đã thực hiện. Tuy nhiên, hai biểu thức tiếp theo đang cố gắng đánh giá đối tượng entry và không phải là kết quả của isSelected(entry), trả về true/false.

Vì vậy, để sửa:

ng-class="{'selected': isSelected(entry), 'bg':isSelected(entry), 'bg-empty':!isSelected(entry)}" 

Đó là, trừ khi bạn đang cố gắng cái gì khác. Cũng lưu ý rằng tôi đã xóa bg-{{entry.color}}. Tôi không có đầu mối làm thế nào để đánh giá một tài sản phạm vi trong một ng-class, hoặc nếu nó thậm chí có thể.

Here is the working plunker demo. Đây có thể không phải là những gì bạn đang làm sau, nhưng nó ít nhất có thể giúp bạn khắc phục sự cố.