angularjs - 使用 orderBy 和 track by 删除 ng-repeat 中的元素失败

Question

这是代码

<tr ng-repeat="collection in collections | orderBy:'-modifiedDate' track by $index" ng-init="listIndex = $index">

如果我删除orderBy:'-modifiedDate'，则特定元素的删除效果很好。但是，我需要以排序方式呈现集合/数组，这就是我有 orderBy 的原因。

如果我不orderBy:'-modifiedDate'从代码中删除 并且我在位置 7 上删除了一个随机元素，那么被删除的元素总是最后一个。

我不得不使用ng-init，因为我在上面显示的ng-repeat里面还有另一个ng-repeat。我这样调用删除函数，ng-click="deleteRow(listIndex)"

Answer 1

listIndex方法中的alert deleteRow，如果正确为7，则用于splice(listIndex,1)删除。

Answer 2

这就是我让它工作的方式。

在模板中

<tr ng-repeat="collection in collections| orderBy:'-modifiedDate'">
 ........
 ... there is another ng-repeat here
   <a ng-click="deleteItem(collection)">Delete this item</a>

在控制器中

  $scope.deleteItem = function(item) {
      $scope.collections.splice($scope.collections.indexOf(item), 1);
  }

Answer 3

或者，更简单：

$scope.deleteItem = function(array, index){
   array.splice(index, 1);
};

在你的 html 中：

<tr ng-repeat="collection in collections| orderBy:'-modifiedDate'">
 ..........
 ..........
 <a ng-click="deleteItem(collections, $index)">Delete this item</a>

Answer 4

当您使用 orderBy 时，angular 在范围内创建另一个“集合”，并更改其元素的顺序，但原始“集合”保持不变，例如：

    $scope.collections = [
    { name: '1st element', id: '1' },
    { name: '2nd element', id: '2' },
    { name: '3rd element', id: '3' }
];

<tr ng-repeat="collection in collections | orderBy:'id':true track by $index">

$scope.collections[2]仍然是{ name: '3rd element', id: '3' }

这是您可以执行的操作，您可以为 angular 创建的排序集合命名：

<tr ng-repeat="collection in sortedCollections = (collections | orderBy:'id':true) track by $index">

然后你可以改用$ scope.sortedCollections[2]