ng-repeat 在 6 个不同的框中显示 6 个不同的值

Question

我试图在 6 个不同的框中显示 6 个不同的数字。 我的代码如下，我用所需的 css 样式重复相同的代码 6 次，但这不起作用。 我只需要下图

其中有 3 个盒子，但我需要 6 个盒子 '像这样'

<button class="button button4>
    <p ng-repeat="head in data.headers">
      {{data.rows[0].measure[$index].qtext}}
    </p>
</button>

Answer 1

您可以使用 CSS :nth-child() 选择器为每个框设置不同的样式。

为此添加一个类到您的<p>

<button class="button button4 ng-repeat="head in data.headers">
    <p class="myColorfulBox">
      {{data.rows[0].measure[$index].qtext}}
    </p>
</button>

并在相应的 CSS 中独立设置框的样式：

.myColorfulBox {
// this is styling for all boxes
}

.myColorfulBox:nth-child(1) {
// this is styling for the first box
  background-color: green;
}

.myColorfulBox:nth-child(2) {
// this is styling for the first box
  background-color: blue;
}

and so on ...