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类选择实现得很好 - 当我在 ng-class true 替换 isSelected（entry）时>，班级得到适当的应用与 isSelected（）功能相同 - 它会正确打印 true 或 false ，具体取决于是否选择了该项目。
即使两个元素都有效，它们也会以某种方式拒绝协同工作，当 isSelected（条目）返回 true时，div类不会更新为 selected EM>

编辑：

存储在天的模型

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

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

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

Answer 1

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

所以要纠正：

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

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

Here is the working plunker demo。这可能不是您所追求的，但它至少可以帮助您排除故障。

在执行ng-click调用的函数之后，ng-class不会更新

1 个答案: