Angularjs faux $ index après ordrePar

Question

Je suis nouvelle Angular.js et avoir des problèmes de tri de mon tableau et de travail sur les données triées.

J'ai une liste avec les éléments et souhaitez donc trier par "Magasin.storeName", qui fonctionne jusqu'à présent. Mais après le tri des données, mon supprimez-la fonction ne fonctionne plus. Je pense que c'est parce que le $index est mal, après le tri, et donc le mal de données est supprimé.

Comment puis-je résoudre ce problème? Organisation des données dans le champ d'application et non dans la vue? Comment faire?

Voici quelques code correspondant:

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, ce qui devrait supprimer les données spécifiques:

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

Cela fonctionne bien avant de passer commande dans la Vue. Si quelque chose d'important est manquant, s'il vous plaît laissez-moi maintenant.

Merci!

Answer 1

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

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

et modifiez la fonction removeItem pour rechercher un index à l'aide de la méthode indexOf d'un tableau, comme suit:

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

Answer 2

J'ai commencé à apprendre angulaire et à faire face à 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>

Answer 3

J'ai eu le même problème et à d'autres réponses dans cette rubrique ne sont pas adaptés à ma situation.

J'ai résolu mon problème avec 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'">

et puis, en HTML, vous pouvez utiliser item.index au lieu de $index.

Cette méthode est appropriée pour les collections d'objets.

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

Answer 4

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 une explication détaillée dans cette entrée de mon blog.

Answer 5

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

mile de la solution est exactement ce dont j'avais besoin. Pour répondre à pkozlowski.opensource question: lorsque vous avez imbriquée ngRepeats, une liste dynamique (par exemple lorsque vous permettre d'enlèvement), ou les deux (ce qui est mon cas), à l'aide de $index ne fonctionne pas car il sera le mauvais indice pour les données back-end après le tri et l'utilisation de ngInit pour le cache de la valeur ne fonctionne pas, soit parce qu'elle n'est pas réévaluée lorsque la liste des changements.

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

Ma version remanié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 );
    });
})