ng-repeat 的每个元素的特定颜色

Question

我使用了 ng-repeat 来遍历数组并打印出一些 div。我有另一个包含不同颜色的数组（其中 6 个）。现在可以从循环中打印的 div 的最大数量是 6。我想要一些正在打印的 div 如何根据索引从颜色数组中获取边框颜色，即第一个 div 采用第一种颜色，第二个，第二个颜色，依此类推到打印的 div 数量。如果有 4 个 div，则使用数组中的前四种颜色。我该怎么做？

<div ng-repeat="x in details">
    <p>{{ x.name }}</p>
    <p>{{ x.fcount }}</p>
    <p>{{ x.email }}</p>
    <p>{{ x.contact }}</p>
    <p>{{ x.DOB }}</p>
</div>

颜色数组是： 颜色 = [#000000, #00ff00, #0000ff, #ff0000, #f7faff, #77da63]

可能的最大 div 数为 6，因此数组有 6 种颜色。

Answer 1

像这样使用ng-style：

<div ng-repeat="x in details" ng-style="{ 'border-color': colors[$index] }">
    <p>{{ x.name }}</p>
    <p>{{ x.fcount }}</p>
    <p>{{ x.email }}</p>
    <p>{{ x.contact }}</p>
    <p>{{ x.DOB }}</p>
</div>

查看工作演示：fiddle