Question

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

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

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

经过一些诊断后，我发现表中对象的索引（来自$ 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       |
-------------------------------------

如果我将乔治改为蒂姆，该对象的索引也会变为3。所有其他索引保持不变。任何人都可以告诉我为什么会发生这种情况和/或给我如何解决这个问题的建议吗？

Answer 1

这就是我如何使用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;
}

Answer 2

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

ng-repeat元素＆＃39;索引更改排序

2 个答案: