ng-click이 호출 된 후 함수를 실행해야 할 때 ng-class가 업데이트되지 않습니다.

Question

AngularJS에서 ng-class에 문제가 있습니다. 올바르게 업데이트하지 않습니다.

보기 :

<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 클래스 잘 구현 - 나는 에 isSelected (항목) 사실에서 로를 교체 할 때 ng-class 클래스가 올바르게 적용됩니다. 에 isSelected() 기능
같은 일이 - 올바르게 사실 또는 항목을 선택 여부에 따라 거짓인쇄합니다.
는 두 요소들은 어떻게 든 함께 일하기를 거부 작동에도 불구하고, DIV 클래스는 선택 에 업데이트되지 않을 때 에 isSelected (항목) 반환 사실.

편집 : 일 당신이 볼 수 있듯이

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

에 저장

모델, 그것은 널 (null) 중 하나입니다 또는 항목 객체를 포함 7 개 요소의 배열입니다.

내보기의 게시 된 섹션이 다른 ng-repeat 안에 있다는 것을 잊어 버렸습니다. 위의보기 코드 스 니펫이이를 반영하도록 확장되었습니다.

Answer 1

Ng-class는 설정 한대로 오브젝트의 첫 번째 표현식이 수행 한 부울 표현식을 평가하려고합니다. 그러나 다음 두 표현식은 entry 개체를 평가하려고 시도하며 true/false를 반환하는 isSelected(entry)의 결과는 평가하지 않습니다.

그래서 수정하기 : 당신이 뭔가를하려고하지 않는 것입니다

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

. 또한 bg-{{entry.color}}을 삭제했음을 확인합니다. ng-class 내에서 스코프 속성을 평가하는 방법이나 가능한 경우 단서가 없습니다.

Here is the working plunker demo. 이것은 귀하가 겪은 것이 아니지만 문제 해결에 도움이 될 수 있습니다.