Angularjs sai $ index sau orderBy

Tôi mới sử dụng Angular.js và gặp một số vấn đề khi sắp xếp mảng của mình và làm việc trên dữ liệu được sắp xếp đó.

Tôi có một danh sách với các mục và muốn sắp xếp nó theo "Store.storeName", danh sách này đang hoạt động cho đến nay. Nhưng sau khi sắp xếp dữ liệu, chức năng xóa của tôi không hoạt động nữa. Tôi nghĩ rằng đó là do $ index bị sai sau khi sắp xếp và vì vậy dữ liệu sai sẽ bị xóa.

Làm thế nào tôi có thể giải quyết điều đó? Sắp xếp thứ tự dữ liệu trong phạm vi và không trong chế độ xem? Làm thế nào để làm điều đó?

Đây là một số mã có liên quan:

Theo quan điểm:

<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>

Và trong bộ điều khiển của tôi, tôi có chức năng xóa này, chức năng này sẽ xóa dữ liệu cụ thể:

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

Điều này hoạt động tốt trước khi đặt hàng trong Chế độ xem. Nếu có điều gì quan trọng bị thiếu, xin vui lòng cho tôi bây giờ.

Cảm ơn!

Thay vào đó hoặc chuyển tiếp trên $index- mà - như bạn đã nhận thấy - sẽ trỏ đến chỉ mục trong một mảng được sắp xếp / lọc, bạn có thể chuyển chính mục đó vào removeItemhàm của mình :

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

và sửa đổi removeItemhàm để tìm chỉ mục bằng cách sử dụng indexOfphương thức của một mảng như sau:

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

Tôi bắt đầu tìm hiểu về góc cạnh và đối mặt với những rắc rối tương tự, và dựa trên câu trả lời của @ pkozlowski-opensource, tôi đã giải quyết nó chỉ bằng một số thứ như

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

Tôi đã có cùng một vấn đề và các câu trả lời khác trong chủ đề này không phù hợp với tình huống của tôi.

Tôi đã giải quyết vấn đề của mình với bộ lọc tùy chỉnh:

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;
    };
});

có thể được sử dụng theo cách này:

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

và sau đó trong HTML, bạn có thể sử dụng item.indexthay thế $index.

Phương pháp này phù hợp với các tập hợp các đối tượng.

Vui lòng lưu ý rằng bộ lọc tùy chỉnh này phải là bộ lọc đầu tiên trong danh sách tất cả các bộ lọc được áp dụng (orderBy, v.v.) và nó sẽ thêm thuộc tính bổ sung index(tên có thể tùy chỉnh) vào từng đối tượng của bộ sưu tập.

Thử cái này:

$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);

}

Bạn có thể tìm thấy lời giải thích dài dòng trong mục này trong blog của tôi.

Trong trường hợp ai đó cần sử dụng $index, bạn có thể đặt tên cho mảng được sắp xếp / lọc:

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

Xem câu trả lời của tôi tại đây .

Tôi sẽ chỉ để lại một bình luận, nhưng tôi không có "danh tiếng".

giải pháp của dặm cũng chính xác là những gì tôi cần. Để trả lời câu hỏi của pkozlowski.opensource: khi bạn có các ngRepeats lồng nhau , một danh sách động (ví dụ: nơi bạn cho phép xóa) hoặc cả hai (đó là trường hợp của tôi), việc sử dụng $indexkhông hoạt động vì nó sẽ là chỉ mục sai cho back-end dữ liệu sau khi sắp xếp và sử dụng ngInitđể lưu vào bộ nhớ cache, giá trị cũng không hoạt động vì nó không được đánh giá lại khi danh sách thay đổi.

Lưu ý rằng giải pháp của mile cho phép tên thuộc tính chỉ mục đính kèm được tùy chỉnh bằng cách chuyển một tham số <tr ng-repeat="item in items | index:'originalPosition' | orderBy:'Store.storeName'">

Phiên bản đã chỉnh sửa của tôi:

.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 );
    });
})