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 クラスは正常に実装されています - ng-classでisSelected(entry)をtrueに置き換えると、クラスが適切に適用されます。isSelected()関数
でも同じです。項目が選択されているかどうかに応じて、trueまたはfalseを正しく出力します。両方の要素が機能しますが、どういうわけか一緒に機能することを拒否し、 isSelected(entry)がtrueを返すときにdiv クラスが選択済みに
更新されません。
編集:
1 日に保管されたモデル
{
"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 内にあることを忘れていました。上記のビュー コード スニペットは、それを反映するように展開されています。