The ng class is not updated when it should after running the function with ng-click

Question

I have a problem with an ng class in AngularJS - it is not updating properly.

View:

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

The selected CSS class is selected - when replacing isSelected (entry) with true in the ng-class, the class is applied correctly.
The same thing with the isSelected () function - it correctly displays true or false depending on whether the element is selected.
Although both elements work, they somehow refuse to work together, and the div class is not updated to the selected one when isSelected (entry) returns true.

Edit:

Saved Model Per Day

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

As you can see, this is an array of 7 elements that are either zero or contain a recording object.

I forgot to mention that the published section of my view is inside another ng-repeat. The code snippet above has now been expanded to reflect this.

Answer 1

The ng class, as you configured it, wants to evaluate the logical expression that executed your first expression in the object. However, the following two expressions try to evaluate the entry object, not the result of isSelected(entry) , which returns true / false.

So, to fix:

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

That is, if you are not trying to do something else. Also note that I removed bg-{{entry.color}} . I do not know how to evaluate the scope property inside an ng class, or if that is possible.

Here is a diagram of a working plunger . This may not be what you need, but it can help you troubleshoot.