Angularjs errato $ indice dopo ordineDi

Question

Sono nuovo in Angular.js e ho alcuni problemi nell'ordinare il mio array e lavorare su quei dati ordinati.

Ho una lista con gli articoli e voglio così ordinarla per "Store.storeName", che sta funzionando finora. Ma dopo aver ordinato i dati, la mia funzione di cancellazione non funziona più. Penso che questo sia perché l'indice $ è sbagliato dopo l'ordinamento, e quindi i dati errati vengono cancellati.

Come posso risolvere quello? Ordinare i dati nell'ambito e non nella vista? Come farlo?

Ecco codice rilevante:

Nella Vista:

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

E nel mio controller ho questa funzione, che dovrebbe eliminare i dati specifici cancellare:

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

Questo funziona bene prima di ordinare nella vista. Se manca qualcosa di importante, per favore lasciatemi ora.

Grazie!

Answer 1

Invece o stabulazione sul $index - che - come avete notato - punterà l'indice in un array ordinato/filtrato, è possibile passare l'elemento stesso alla funzione removeItem:

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

e modificare la funzione removeItem per trovare un indice utilizzando il metodo di una matrice indexOf come segue:

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

Answer 2

Prova questo:

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

} 

È possibile trovare spiegazioni dettagliate nello this entry nel mio blog.

Answer 3

Ho avuto lo stesso problema e altre risposte in questo argomento non sono adatte alla mia situazione.

Ho risolto il mio problema con filtro personalizzato:

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

che può essere utilizzato in questo modo:

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

e poi in HTML è possibile utilizzare al posto di item.index$index.

Questo metodo è adatto per le raccolte di oggetti.

Si prega di prendere in considerazione che questo filtro personalizzato dovrebbe essere il primo nell'elenco di tutti i filtri applicati (orderBy ecc.) E aggiungerà la proprietà aggiuntiva index (il nome è personalizzabile) in ogni oggetto del collezione.

Answer 4

Avrei appena lasciato un commento, ma non ho la "reputazione".

soluzione di miglio è esattamente quello che mi serviva anche io. Per rispondere a pkozlowski.La domanda di opensource: quando hai nidificato ngRepeat s, un elenco dinamico (ad esempio dove permetti le rimozioni), o entrambi (che è il mio caso), usando $index non funziona perché sarà l'indice sbagliato per i dati di back-end dopo l'ordinamento e l'uso di ngInit per memorizzare nella cache il valore non funziona perché non viene rivalutato quando l'elenco cambia.

nota che la soluzione di miglio permette il nome della proprietà di indice collegato a essere personalizzato passando un parametro <tr ng-repeat="item in items | index:'originalPosition' | orderBy:'Store.storeName'">

La mia versione ottimizzato:

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

Answer 5

ho iniziato a imparare angolare e affrontato problemi simili, e sulla base sulla risposta di @ pkozlowski-opensource, ho risolto solo con qualcosa di simile

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

Answer 6

Nel caso in cui qualcuno ha bisogno di usare 0.123., si può dare un nome alla array ordinato/filtrato:

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

vedi la mia risposta here.