orderBy 후 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">

여기 내 대답을 참조 하십시오 .

그냥 코멘트를 남겼을 텐데 "평판"이 없어요.

마일의 솔루션은 나에게도 필요한 것입니다. pkozlowski.opensource의 질문에 대답하려면 : 중첩 된 ngRepeats, 동적 목록 (예 : 제거를 허용하는 위치) 또는 둘 다 (내 경우) $index가 있으면 백엔드에 대한 잘못된 인덱스가 될 것이므로 사용 이 작동하지 않습니다. 정렬 및 ngInit캐시에 사용한 데이터 는 목록이 변경 될 때 재평가되지 않기 때문에 작동하지 않습니다.

마일의 솔루션은 매개 변수를 전달하여 첨부 된 색인 속성 이름을 사용자 정의 할 수 있도록합니다. <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 );
    });
})