Angular - ng-class在td上工作但不在tr上工作

Question

在ng-repeat中使用以下HTML。

这有效：

<tr>
    <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td>
    ...

但这不起作用：

<tr ng-class="info.lastInMonth">
    <td>{{ info.date_formatted }}</td>
    ...

完全相同的表达式在td中起作用，但在tr上起作用。

有人知道为什么吗？

Answer 1

如果样式特定于td，则使用td更安全。因为td会覆盖应用于tr的样式。

考虑以下css类：

.test{
    background: #ccddee;
    padding: 5px;
    border: solid #5a5a5a 5px;
}

现在将其应用于tr

<table>
        <tr class="test"><td>cell content</td></tr>
    </table>

将生成输出，无边框和填充：

如果您将其应用于td

<table>
  <tr><td  class="test">cell content</td></tr>
</table>

您可以看到已应用的边框和填充：

Answer 2

它实际上适用于我的代码。试着找出它们之间的差异。顺便说一句，它可能是由角度版本引起的。

var meadow = angular.module('meadow', []);
meadow = meadow.controller("abc", function($scope) {
  $scope.info = {
    lastInMonth: "a",
    date_formatted: "b"
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="meadow" ng-controller="abc">
  <table>
    <tr ng-class="info.lastInMonth">
      <td>{{ info.date_formatted }}</td>
    </tr>
  </table>

</div>