Question

我对Smart Table AngularJS排序有问题，我在我的桌子上实现了这个：

初始化的应用：

angular.module('myproyApp', ['smart-table'])

控制器方：

$scope.dataList = []; //any json collection with: id, name and description

带有st-table指令的视图端：

<table class="table table-bordered table-striped" st-table="dataRows" st-safe-src="dataList">
  <thead>
    <tr>
      <th><span class="glyphicon"></span>Q</th>
      <th st-sort="name">Name</th>
      <th st-sort="descripcion">Description</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in dataRows">
      <td class="col-md-1">{{$index + 1}}</td>
      <td class="col-md-4">{{row.name}}</td>
      <td class="col-md-4">{{row.description}}</td>
      <td><a href="#anyAction{{row.id}}">Change</a></td>
   </tr>
  </tbody>
</table>

单击表正在排序的排序标题单元格，但排序不适用于$ index单元格。如果您有任何想法要包含$ index单元格进行排序请。我不想在dataList $ scope值上使用索引，我需要这个索引只包含在表视图上。

Answer 1

Track by用于将您的数据与ng-repeat生成的DOM生成相关联。当您添加轨道时，告诉angular在给定集合中为每个数据对象生成单个DOM元素。因为$ index与DOM有关，所以无法将其与特定数据条目相关联。 Here's a more detailed explanation.

如果确实希望在不触及dataList的情况下执行此操作，则可以在表中调用indexOf：

<tbody>
  <tr ng-repeat="row in dataList | orderBy:sortField">
    <td class="col-md-1">{{dataRows.indexOf(row)}}</td>
    <td class="col-md-4">{{row.name}}</td>
    <td class="col-md-4">{{row.description}}</td>
    <td><a href="#anyAction{{row.id}}">Change</a></td>
  </tr>
</tbody>

其中有一个名为sortField的范围变量，它是一个字符串，是您要排序的字段的名称。我使用smart-tables模块在这个plunker中实现了类似的东西。 http://plnkr.co/edit/AF90dQ

我建议不要这样做，因为对于大型阵列来说它很快就会变得昂贵，并且如果您的条目不是唯一的话会遇到问题。

Angularjs智能表不排序$ index表格单元格

1 个答案: