Angularjs faux $ index après orderBy

Je suis nouveau sur Angular.js et j'ai des problèmes pour trier mon tableau et travailler sur ces données triées.

J'ai une liste d'articles et je veux donc la trier par "Store.storeName", qui fonctionne jusqu'à présent. Mais après avoir trié les données, ma fonction de suppression ne fonctionne plus. Je pense que c'est parce que l'index $ est erroné après le tri, et donc les mauvaises données sont supprimées.

Comment puis-je résoudre ça? Commander les données dans la portée et non dans la vue? Comment faire ça?

Voici un code pertinent:

Dans la vue:

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

Et dans mon contrôleur, j'ai cette fonction de suppression, qui devrait supprimer les données spécifiques:

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

Cela fonctionne bien avant de commander dans la vue. S'il manque quelque chose d'important, laissez-moi maintenant.

Merci!

Au lieu de cela ou en reliant le $index- qui - comme vous l'avez remarqué - pointera vers l'index dans un tableau trié / filtré, vous pouvez passer l'élément lui-même à votre removeItemfonction:

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

et modifiez la removeItemfonction pour trouver un index en utilisant la indexOfméthode d'un tableau comme suit:

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

J'ai commencé à apprendre angulaire et j'ai rencontré des problèmes similaires, et sur la base de la réponse de @ pkozlowski-opensource, je l'ai résolu avec quelque chose comme

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

J'ai eu le même problème et les autres réponses dans ce sujet ne sont pas adaptées à ma situation.

J'ai résolu mon problème avec le filtre personnalisé:

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

qui peut être utilisé de cette façon:

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

puis en HTML, vous pouvez utiliser à la item.indexplace de $index.

Cette méthode convient aux collections d'objets.

Veuillez prendre en compte que ce filtre personnalisé doit être le premier dans la liste de tous les filtres appliqués (orderBy, etc.) et qu'il ajoutera la propriété supplémentaire index(le nom est personnalisable) dans chaque objet de la collection.

Essaye ça:

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

}

Vous pouvez trouver des explications détaillées dans cette entrée de mon blog.

Au cas où quelqu'un aurait besoin d'utiliser $index, vous pouvez donner un nom au tableau trié / filtré:

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

Voir ma réponse ici .

J'aurais juste laissé un commentaire, mais je n'ai pas la "réputation".

La solution de mile est exactement ce dont j'avais besoin. Pour répondre à la question de pkozlowski.opensource: lorsque vous avez imbriqué des ngRepeats, une liste dynamique (par exemple où vous autorisez les suppressions), ou les deux (ce qui est mon cas), utiliser $indexne fonctionne pas car ce sera le mauvais index pour le back-end les données après le tri et l'utilisation ngInitpour mettre en cache la valeur ne fonctionnent pas non plus car elles ne sont pas réévaluées lorsque la liste change.

Notez que la solution de mile permet de personnaliser le nom de la propriété d'index attaché en passant un paramètre <tr ng-repeat="item in items | index:'originalPosition' | orderBy:'Store.storeName'">

Ma version modifiée:

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