Question

这个问题是关于在AngularJS指令中创建的表的样式。我有一个从HTML文件传递给指令的对象数组。该指令创建一个表，并在一行中显示该数组的每个对象。

现在我的问题：每个对象都有一个名为 name 的自定义JSON字段。造型是通过LESS技术完成的，当＆＃39; name == david＆＃39; 时，我希望在每行后面有一条粗的分隔线。请考虑这种情况可能有所不同，例如当＆＃39; rowID％3 == 0＆＃39;我的一般问题是如何在LESS文件中访问这些对象，如何在LESS中创建条件样式。

Answer 1

我做了很多假设，因为你没有包含任何代码或标记，但在Angular中这是一个非常基本的简单问题，并且与你是否使用LESS，Sass无关，或者只是简单的CSS：

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in vm.items track by $index" ng-class="{'thick-separator': isNameDavid(item) || $index%3 == 0}">
      <td>{{item.propOne}}</td>
      <td>{{item.propTwo}}</td>
      <td>{{item.propThree}}</td>
    </tr>
  </tbody>
</table>

在您的控制器中：

$scope.isNameDavid = function(item) {
  return item.name == 'david';
};

使用ngClass指令和$index指令引入的ngRepeat范围变量，您可以轻松地有条件地将thick-separator类分配给表行。 / p>

现在，如果您使用的是LESS，Sass或纯CSS，则没有任何区别：

.thick-seperator {
  border-top: 5px solid black;
}

但是，如果您试图说您无法更改Angular代码并且您需要能够完全使用LESS进行样式设置，那么您可以使用属性和nth-child选择器进行样式设置。请注意，这些在纯CSS中可用，并且不需要LESS：

table tbody tr:nth-child(3n+3), table tbody tr[data-name="david"] {
  border-top: 5px solid black;
}

表格造型较少

1 个答案: