带角度 ng-repeat 的数字表答案

【问题标题】：Numareting table with angular ng-repeat带角度 ng-repeat 的数字表
【发布时间】：2016-09-21 18:13:35
【问题描述】：

我想用角度创建编号表，

我试过了

<tr ng-repeat="item in data">
     <td>{{$index}}</td>
     <td>{{item.name}}</td>
</tr>

它有效，但是当我使用 order By 对表进行排序时，我想保留 index-es 所以 tr 中的第一个 "" 总是必须是这样的 - 1,2,3,4 并 order by 将其更改为 2、1、4、3 之类的东西

对不起我的英语不好

我添加了 jsfiddle 示例

http://jsfiddle.net/Lvc0u55v/9907/

【问题讨论】：

只是为了确保，您希望第一行始终是数字 1，第二行始终是 2，等等？
是的，第一行始终是第 1 行，尽管顺序发生了变化

标签： javascript angularjs

【解决方案1】：

$index 变量不是data 的一部分，而只是数组索引。当您使用不同参数对数组进行排序时，data 数组值的顺序发生了变化，但数组索引与以前相同。要解决这个问题，您可以将连续的value 作为data 数组的每个对象的属性。然后显示显示该属性而不是显示数据数组的$index。

例如在控制器中：

for(var i = 0; i < $scope.data.length; i++){
  $scope.data[i].sl = i+1;
}

在视图中：

<tr ng-repeat="item in data">
     <td>{{item.sl}}</td>
     <td>{{item.name}}</td>
</tr>

【讨论】：

但是当排序发生变化时，会发生什么？在您的示例中，我希望第一个 td 编号为 1、2、3、4 等，索引仅适用于第一次，当用户更改排序顺序时，sl 字段值将随机排列，因此不会有 1、2、3， 4
那么，您不希望通过过滤器应用订单时它是随机播放的吗？
您可以尝试使用<td>data.indexOf(item)</td>
但它不会是升序，对吧？当我更改排序顺序时 indexOf 不会改变
这是主要问题

【解决方案2】：

一种选择是将列标记为不排序，如下所示：

$scope.dtColumnDefs = [
          DTColumnDefBuilder.newColumnDef(0).notSortable()
];

示例数据表：

<table dt-column-defs="dtColumnDefs"> </table>

Here 是一些文档。

但是，可以使用 Jquery 将某些表数据标记为不可排序，例如 @dSquared answer。

【讨论】：

你写了数据表的例子，我没有使用它，只是原生 ng-repeat

【解决方案3】：

我找到的最简单的解决方案，使用 css

table{
   counter-reset: rows; /* initalize the counter variable */
}
tr{
counter-increment: rows; /* increment the counter every time a tr is       encountered */
}
td{ /* just for demo */
    vertical-align: top;
    width: 100px;
}
td:first-child:before{ /* add the counter value before the first td in every row */
    content: counter(rows) ". ";
}

【讨论】：