92

I am new to Angular.js and have some problems sorting my array and working on that sorted data.

I have a list with items and want so sort it by "Store.storeName", which is working so far. But after sorting the data, my delete-function is not working anymore. I think thats because the $index is wrong after sorting, and so the wrong data is deleted.

How can I solve that? Ordering the data in the scope and not in the view? How to do that?

Here is some relevant code:

In the View:

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

And in my controller I have this delete function, which should delete the specific data:

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

This works nicely before ordering in the View. If something important is missing, please let me now.

Thanks!

Fortin
  • 152
  • 2
  • 14
FuzzBuzz
  • 999
  • 1
  • 7
  • 7

6 Answers6

140

Instead or relaying on the $index - which - as you have noticed - will point to the index in a sorted / filtered array, you can pass the item itself to your removeItem function:

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

and modify the removeItem function to find an index using the indexOf method of an array as follows:

$scope.removeItem = function(item){
   $scope.items.splice($scope.items.indexOf(item),1);
}
pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
  • 1
    @pkozlowski.opensource You are a genius! You can pass an item, not index.. Wow!! Thanks man. – good_evening Aug 12 '14 at 20:33
  • Array indexOf is not available in Internet Explorer 8 and lower. – Peter Hedberg Oct 25 '14 at 19:08
  • 4
    The question title is asking about wrong $index after orderBy, which this answer does not address. There are cases where you need the correct $index value (such as shift select on a list). How do we get the correct $index value after orderBy filter has been applied? – Jason Parker Oct 26 '15 at 16:28
  • you can also create a new array from the ordered list within the template by doing something like this: "ele in ordered_array = (array | filter: filter | orderBy: order_by)" – Porlune Oct 23 '16 at 22:53
  • Neat! Thanks bro. – jofftiquez Dec 26 '16 at 10:41
23

I started to learn angular and faced similar trouble, and based on the answer of @pkozlowski-opensource, I solved it just with something like

<a>
  <img src="img/delete.png" ng-click="removeItem(items.indexOf(item))">
  {{items.indexOf(item)}}
</a>
Stephen Fuhry
  • 12,624
  • 6
  • 56
  • 55
ad_nm
  • 253
  • 3
  • 5
19

I had the same problem and other answers in this topic are not suitable for my situation.

I've solved my problem with custom filter:

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

which can be used this way:

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

and then in HTML you can use item.index instead of $index.

This method is suitable for the collections of objects.

Please, take into account that this custom filter should be the first one in the list of all filters applied (orderBy etc.) and it will add the additional property index (the name is customizable) into the each object of the collection.

mile
  • 191
  • 1
  • 3
  • Could you elaborate on why the other answers are not suitable for your situation? – pkozlowski.opensource Jul 26 '14 at 16:44
  • 1
    @pkozlowski.opensource This is far cleaner. Also depending on what events could be attached, and the complexity of the items in indexOf far far more efficient. Also `$scope.items.splice($scope.items.indexOf(item),1);` will not work as expected for duplicate items. – martin Nov 18 '14 at 00:58
  • 1
    @martin you should back up your claims regarding performance with real numbers. A filter has _huge_ disadvantage of being executed on _each and every_ $digest cycle so I don't think it helps with performance... – pkozlowski.opensource Nov 18 '14 at 08:10
  • @pkozlowski.opensource That's true, and it runs twice for each $digest cycle. The important thing is "depending on what events could be attached", performance matters when you have no control of the rate, e.g., un-throttled scroll event - extreme case I know. – martin Nov 18 '14 at 23:29
  • @mile Well i do have duplicates and this is what i was looking for, just a bit sad that Angular does not keep track or the original index in a $ variable. i tried `(key, item) in items` and it does not work either. (key is not kept to original) – Rouche Dec 23 '15 at 17:38
4

Try this:

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

}

You can find verbose explanation in this entry in my blog.

Dmitrii Dushkin
  • 3,070
  • 4
  • 26
  • 37
2

In case someone needs to use $index, you can give a name to the sorted / filtered array :

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

See my answer here.

hmk
  • 139
  • 1
  • 5
  • I think this answer is fine, if lacking on detail. I think what hmk means is that once the filtered list has been set aside, as above, the index can be used against it (i.e. "sortedItems[$index]") to retrieve the desired entry. – Jeremythuff Dec 20 '18 at 13:41
1

I would've just left a comment, but I don't have the "reputation".

mile's solution is exactly what I needed too. To answer pkozlowski.opensource's question: when you have either nested ngRepeats, a dynamic list (e.g. where you allow removals), or both (which is my case), using $index does not work because it will be the wrong index for the back-end data after sorting and using ngInit to cache the value does not work either because it's not re-evaluated when the list changes.

Note that mile's solution allows for the attached index property name to be customized by passing a parameter <tr ng-repeat="item in items | index:'originalPosition' | orderBy:'Store.storeName'">

My tweaked version:

.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 );
    });
})
MarkMYoung
  • 141
  • 1
  • 9