AngularJS订购后错误的$ index

我是Angular.js的新手，在排序数组和处理排序后的数据时遇到一些问题。

我有一个包含项目的列表，并希望按“ Store.storeName”对其进行排序，到目前为止，该列表仍然有效。但是在对数据进行排序之后，我的删除功能不再起作用。我认为那是因为排序后$ index错误，因此删除了错误的数据。

我该如何解决？在范围内而不是在视图中排序数据？怎么做？

这是一些相关的代码：

在视图中：

<tr ng-repeat="item in items | orderBy:'Store.storeName'">
                <td><input class="toggle" type="checkbox" ng-model="item.Completed"></td>
                <td>{{item.Name}}</td>
                <td>{{item.Quantity}} Stk.</td>
                <td>{{item.Price || 0 | number:2}} €</td>                
                <td>{{item.Quantity*item.Price|| 0 | number:2}} €</td>
                <td>{{item.Store.storeName}}</td> 
                <td><a><img src="img/delete.png" ng-click="removeItem($index)">{{$index}}</a></td>
            </tr>

在我的控制器中，我具有此删除功能，该功能应删除特定数据：

$scope.removeItem = function(index){
        $scope.items.splice(index,1);
    }

在视图中订购之前，这很好用。如果缺少重要的东西，请让我现在。

谢谢！

取而代之或中继$index-如您所注意到的-将指向已排序/过滤后的数组中的索引，您可以将该项本身传递给removeItem函数：

<a><img src="img/delete.png" ng-click="removeItem(item)">{{$index}}</a>

并removeItem使用indexOf数组方法修改该函数以找到索引，如下所示：

$scope.removeItem = function(item){
   $scope.items.splice($scope.items.indexOf(item),1);
}

我开始学习角度问题，并面临类似的麻烦，并且根据@ pkozlowski-opensource的答案，我用类似

<a>
  <img src="img/delete.png" ng-click="removeItem(items.indexOf(item))">
  {{items.indexOf(item)}}
</a> 

我遇到了同样的问题，此主题中的其他答案不适合我的情况。

我已经通过自定义过滤器解决了我的问题：

angular.module('utils', []).filter('index', function () {
    return function (array, index) {
        if (!index)
            index = 'index';
        for (var i = 0; i < array.length; ++i) {
            array[i][index] = i;
        }
        return array;
    };
});

可以这样使用：

<tr ng-repeat="item in items | index | orderBy:'Store.storeName'">

然后在HTML中，您可以使用item.index代替$index。

此方法适用于对象的集合。

请注意，此自定义过滤器应该是所有应用的过滤器列表中的第一个（orderBy等），它将index在该集合的每个对象中添加其他属性（名称是可自定义的）。

试试这个：

$scope.remove = function(subtask) {

    var idx = $scope.subtasks.indexOf(subtask),
        st = $scope.currentTask.subtasks[idx];

    // remove from DB
    SubTask.remove({'subtaskId': subtask.id});

    // remove from local array
    $scope.subtasks.splice(idx,1);

}

您可以在我的博客中的此条目中找到详细的说明。

万一有人需要使用$index，可以给已排序/过滤后的数组起一个名字：

<tr ng-repeat="item in sortedItems = (items | orderBy:'Store.storeName') track by $index">

在这里查看我的答案。

我只会发表评论，但我没有“声誉”。

mile的解决方案正是我所需要的。要回答pkozlowski.opensource的问题：当您嵌套了ngRepeats，动态列表（例如，您允许删除）或两者都嵌套（这是我的情况）时，使用$index将不起作用，因为这将是后端的错误索引排序后ngInit用于缓存值的数据也不起作用，因为当列表更改时不会重新评估它。

请注意，mile的解决方案允许通过传递参数来自定义索引属性名称 <tr ng-repeat="item in items | index:'originalPosition' | orderBy:'Store.storeName'">

我的调整版本：

.filter( 'repeatIndex', function repeatIndex()
{
// This filter must be called AFTER 'filter'ing 
//  and BEFORE 'orderBy' to be useful.
    return( function( array, index_name )
    {
        index_name = index_name || 'index';
        array.forEach( function( each, i )
        {each[ index_name ] = i;});
        return( array );
    });
})