为二维数组角矩阵中的对角线着色答案

【问题标题】：Coloring the diagonal in a 2d array angular matrix为二维数组角矩阵中的对角线着色
【发布时间】：2016-09-01 02:24:38
【问题描述】：

我正在尝试为给定的方阵 $scope.matrix 中的对角线着色。

<table>
<tr ng-repeat="row in matrix track by $index">
  <td>{{matrix[$index].title}}</td>
  <td>{{$index+1}}</th> <!-- # on left side of table as info -->
  <td ng-repeat="column in row track by $index">{{column.itemData}}</td>
</tr>
</table>

开头的两列插入了信息。因此输出应该是：

+------+------+------+------+------+
| Col1 | Col2 | ColA | ColB | ColC |
| dim  | 1    | x    |      |      |
| dim  | 2    |      | x    |      |
| dim  | 3    |      |      | x    |
+------+------+------+------+------+

带有“x”标记的单元格着色。我不知道如何使用$index 或 ng-repeat。这很荒谬，但我不知道如何。有什么建议吗？

【问题讨论】：

您只想为 x 标记的列着色？
只是对角线中的单元格（除了前 2 列），所以只是 x。以上只是一个示例数据集。当然它更大我需要像 ng-if 这样的东西来添加一个着色类，这是肯定的。但我正在努力检测我是否在对角线上

标签： angularjs matrix multidimensional-array html-table

【解决方案1】：

试试这个

<tr ng-repeat="(key, row) in matrix track by $index">
  <td>{{matrix[$index].title}}</td>
  <td>{{$index+1}}</th> <!-- # on left side of table as info -->
  <td ng-class="{'class-name': key == $index}" ng-repeat="column in row track by $index">{{column.itemData}}</td>
</tr>

CSS

.class-name{
    color:red;
}

【讨论】：

太棒了！完美地工作并了解有条件地应用类以及索引！谢谢，你让我开心