如何使用 ng-repeat 在每行末尾的 td 内添加图标？

Question

我有一个二维数组。我将其用作使用 angularjs ng-repeat 填充 html table 的来源。我想在每一行的末尾添加一个图标。它适用于前两行，但接下来的几行仅包含图标。

<div ng-app="myApp" ng-controller="tblCtrl">
<table id="tableToFilter" class="w3-table-all w3-small w3-row" ng-cloak>
<tr class="w3-blue w3-mobile">
<th data-row="0" data-col="{{$index}}" ng-repeat="columns in header">{{columns}}</th>
<th></th>
</tr>
<tr class="w3-mobile" ng-show="{{$index > 0}}" ng-repeat="rows in table">
<td data-row="{{$parent.$index}}" data-col="{{$index}}" ng-repeat="columns in rows">{{ columns }}</td>
<td><i class="material-icons editIcon">edit</i></td>
</tr>
</table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('tblCtrl', function($scope) {
$scope.table = datags;
$scope.header = datags[0];
});
</script>

上面的

'datags'是一个json.stringify格式的二维数组。它没有 key/value 对。它是 94 行和 9 列。我正在使用 css 来防止显示列 0、4、7、8，以便我的 table 适合我的屏幕。（我确信有一种更简洁的方法可以做到这一点。）

<style>
td[data-col="0"], th[data-col="0"] {
display: none;
}
td[data-col="4"], th[data-col="4"] {
display: none;
}
td[data-col="7"], th[data-col="7"] {
display: none;
}
td[data-col="8"], th[data-col="8"] {
display: none;
}
</style>

screenshot of my table 我做错了什么？

Answer 1

我确实弄明白了。我认为 ng-repeat 将空白视为重复项。我添加了 track by $index，现在可以使用了。 <tr class="w3-mobile" ng-show="{{$index > 0}}" ng-repeat="rows in table track by $index"> <td data-row="{{$parent.$index}}" data-col="{{$index}}" ng-repeat="columns in rows track by $index">{{ columns }}</td> <td><i class="material-icons editIcon">edit</i></td> </tr>

如何使用 ng-repeat 在每行末尾的 td 内添加图标？

How do I add an icon within a td at the end of each row using ng-repeat?

multidimensional-array

angularjs

angularjs-ng-repeat