Angularjs ดัชนี $ ผิดหลังจาก orderBy

ฉันเพิ่งเริ่มใช้ Angular.js และมีปัญหาในการจัดเรียงอาร์เรย์ของฉันและทำงานกับข้อมูลที่เรียงลำดับนั้น

ฉันมีรายการที่มีรายการและต้องการให้จัดเรียงตาม "Store.storeName" ซึ่งใช้งานได้แล้ว แต่หลังจากจัดเรียงข้อมูลฟังก์ชันลบของฉันไม่ทำงานอีกต่อไป ฉันคิดว่าเป็นเพราะดัชนี $ ผิดหลังจากการเรียงลำดับข้อมูลที่ไม่ถูกต้องจึงถูกลบ

ฉันจะแก้ปัญหานั้นได้อย่างไร? จัดลำดับข้อมูลในขอบเขตและไม่อยู่ในมุมมอง? ต้องทำอย่างไร?

นี่คือรหัสที่เกี่ยวข้อง:

ในมุมมอง:

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

ใช้งานได้ดีก่อนสั่งซื้อใน View หากสิ่งสำคัญขาดหายไปโปรดแจ้งให้เราทราบทันที

ขอบคุณ!

แทนหรือการถ่ายทอดบน$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: เมื่อคุณมีรายการที่ซ้อนกันngRepeatรายการไดนามิก (เช่นที่คุณอนุญาตให้ลบ) หรือทั้งสองอย่าง (ซึ่งเป็นกรณีของฉัน) การใช้$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 );
    });
})