ng-class在执行ng-click调用函数后应该更新

I've got a problem with ng-class in AngularJS - it doesn't update properly.

我在AngularJS中遇到了ng-class的问题 - 它没有正确更新。

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

CSS class selected is implemented fine - when I replace isSelected(entry) with true in ng-class, the class gets applied properly.
Same thing with isSelected() function - it correctly prints true or false depending on whether the item is selected.
Even though both elements work, they somehow refuse to work together, and the div class doesn't get updated to selected when isSelected(entry) returns true.

选择的CSS类很好 - 当我用ng-class中的true替换isSelected(entry)时,类被正确应用。与isSelected()函数相同 - 它会根据是否选中该项正确打印true或false。即使两个元素都有效,它们也会以某种方式拒绝协同工作,并且当isSelected(entry)返回true时,div类不会更新为选中状态。

Edit:

Model stored in 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, it's an array of 7 elements which are either null or contain an entry object.

如您所见,它是一个包含7个元素的数组,这些元素为null或包含一个入口对象。

I forgot to mention that posted section of my view is inside another ng-repeat. View code snippet above is now expanded to reflect that.

我忘了提到我的观点的张贴部分在另一个ng-repeat里面。现在可以扩展上面的查看代码段以反映这一点。

1 个解决方案

#1

Ng-class, as you have set it up, is wanting to evaluate a boolean expression, which your first expression in the object has done. However, the next two expressions are trying to evaluate the entry object, and not the result of isSelected(entry), which returns true/false.

正如你设置的那样,Ng-class想要评估一个布尔表达式,它是你对象中的第一个表达式所做的。但是,接下来的两个表达式试图评估条目对象,而不是isSelected(entry)的结果,它返回true / false。

So to correct:

所以纠正:

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

That is, unless you are trying something else. Also notice that I removed bg-{{entry.color}}. I have no clue how to evaluate a scope property within an ng-class, or if it is even possible.

也就是说,除非你正在尝试别的东西。另请注意我删除了bg - {{entry.color}}。我不知道如何评估ng-class中的范围属性,或者甚至是否可能。

Here is the working plunker demo. This may not be what you are after, but it can at least help you troubleshoot.

这是工作的plunker演示。这可能不是您所追求的,但它至少可以帮助您排除故障。

#1