ng-repeat 元素的索引在排序时发生变化答案

【问题标题】：ng-repeat elements' indexes changing on sortng-repeat 元素的索引在排序时发生变化
【发布时间】：2015-07-22 00:06:06
【问题描述】：

我有一个 HTML 表，其中包含使用 ng-repeat 创建的行和使用对象数组中对象的属性创建的数据。它们按名称列按字母顺序排序。我已经使用 ng-show、ng-focus 和 ng-blur 设置了一些简单的编辑，因此不需要保存按钮或类似的东西。

但是，当我正在编辑名称列时，如果我键入的第一个字母会导致该行在表格中的位置较低，它会在我仍在键入时对表格进行排序。我尝试创建一个“临时”对象数组，将原始数组复制到其中，在编辑时修改“临时”数组，然后在编辑完成后将临时数组复制到原始数组中。那没有用；无论如何，同样的事情发生了。

经过一番研究，我了解到临时数组和原始数组可能都指向相同的数据，因此我尝试了多种克隆数组的方法。我终于让它工作了......有一个例外：当我编辑要排序较低的对象时，它移动了。当我再次尝试编辑它时，它做了各种随机的、意想不到的事情。

经过一些诊断后，我发现表中对象的索引（从 $index 获取）在排序时发生了变化。例如：

Table
-------------------------------------
|Name    |Age     |Phone   |Index   |
-------------------------------------
|George  |25      |928-7495|0       |
|John    |34      |342-0673|1       |
|Megan   |28      |834-1943|2       |
|Susan   |19      |274-8104|3       |
-------------------------------------

如果我将 George 更改为 Tim，则该对象的索引也变为 3。所有其他索引保持不变。谁能告诉我为什么会发生这种情况和/或就如何解决这个问题给我建议？

【问题讨论】：

你无法控制“原始数组”的排序吗？它是通过过滤器完成的吗？您需要提供一些示例代码，以便我们知道发生了什么。
@Amine 是的，我有一个过滤器，因为我创建了表格，这样我就可以单击每列的标题来更改排序。
需要一些代码来看看你是如何实现它的。
有什么例子吗？这是我的第一个问题:)
@JFischer00 你能用 plnkr.co 建立一个例子吗？如果不审查您的具体实施，就很难提供帮助。

标签： javascript arrays angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

显然，我只是没有意识到每次更改数据或数据排序时索引都会更改。将索引添加为我的对象的属性后，一切都按预期工作。

【讨论】：

【解决方案2】：

这就是我如何使用 orderBy Angularjs 过滤器和单击时反转的列排序。 “th”中的“a”标签控制行为。我在指令中有这个，这是推荐的，但代码可以在控制器中。

我使用他们所说的 Angularjs orderBy 过滤器。

$filter('orderBy')(array, expression, reverse)
// This is the order of properties in the code below that looks like this
// $scope.rows = angularSortBy( $scope.rows, columnName, toggleOrderDirection( columnName ));

每一列都有一个字体很棒的多箭头切换，称为

<i class="fa fa-sort"></i>

列会是这样的...

$scope.columns = { columnOne: { label: 'Column One', orderDirection: true, selected: false },
    columnTwo: { label: 'Column Two', orderDirection: true, selected: false },
    columnThree: { label: 'Column Three', orderDirection: true, selected: true }};

行可以是任何你想要的......

<table>
  <tr>
    <th>Sort By</th>
    <th ng-repeat="(key, value) in columns">
      <a href="" ng-click="orderBy( key )">{{ value.label }}</a>
      <span ng-if="value.selected">
      (<i class="fa fa-sort"></i>) // font-awesome arrow font.
    </th>
  </tr>

  <tr ng-repeat="row in rows">// stuff here</tr>


var angularSortBy = $filter( 'orderBy' ); // use Angular's built in filter to sort table.

$scope.orderBy = function( columnName ){
  resetAllSelectedStates(); // sets column.selected prop to false.
  setAsSelected( columnName, true );
  $scope.rows = angularSortBy( $scope.rows, columnName, toggleOrderDirection( columnName ));
}

function resetAllSelectedStates(){
  Object.keys( $scope.columns ).forEach( resetColumnPropertyToDefault );
}

function resetColumnPropertyToDefault( name ){
  $scope.columns[ name ].selected = false;
}

function setAsSelected( name ){
  $scope.columns[ name ].selected = true;
}

function toggleOrderDirection( name ){
    return $scope.columns[ name ].orderDirection = !$scope.columns[ name ].orderDirection;
}

【讨论】：