2016-07-29 22 views
1

Ich habe ein Array von zipcodes:AngularJS ng-Repeat-Array wichtigsten Änderungen mit Filter mit

var zipcodes = [ 
{ "Zipcode":"00501", "State":"NY", "City":"Holtsville" }, 
{ "Zipcode":"90210", "State":"CA", "City":"Beverly Hills" }, 
{ "Zipcode":"00544", "State":"NY", "City":"Holtsville" } 
]; 

Ich bin Auflistung sie in einer Tabelle wie:

<input type="text" ng-model="query" placeholder="Search..."><br> 
<table> 
<tr ng-repeat="(key, zipcode_data) in zipcodes | filter: query" ng-click="edit_zip(key)"> 
<td>{{ zipcode_data.Zipcode }}</td> 
<td>{{ zipcode_data.City }}</td> 
</tr> 
</table> 

die Zeile klicken, öffnet sich ein Dialog zur Bearbeitung und das funktioniert gut ... aber wenn ich die Daten filtern, ändert sich der Schlüssel. Dies ruft den falschen Datensatz (Schlüssel) aus dem ursprünglichen Array im Bearbeitungsdialog auf (wenn die gefilterte Liste neu sortiert wird).

Zum Beispiel, wenn ich die Stadt 'Holtsville' filtere, werden zwei Reihen angezeigt, klicken sie auf dem zweiten Datensatz senden die Taste 1, aber der zipcodes Array-Schlüssel 1 ist für 90210.

$scope.edit_zip = function(index) { 
$scope.index = index; 
var modal = ngDialog.open({ 
    scope: $scope, 
    template: 'zip_edit.html' 
}); 
} 

gibt es eine Möglichkeit, den ursprünglichen Array-Index im ng-repeat zu erhalten, so dass es auf die richtige Anordnung richtig bindet Element?

Antwort

1

Immer zipcode_data und nie index wie später, wenn Sie orderBy hinzufügen oder filter Sie in Themen wie index laufen nicht erhalten:

<input type="text" ng-model="query" placeholder="Search..."><br> 
<table> 
<tr ng-repeat="zipcode_data in zipcodes | filter: query" ng-click="edit_zip(zipcode_data)"> 
<td>{{ zipcode_data.Zipcode }}</td> 
<td>{{ zipcode_data.City }}</td> 
</tr> 
</table> 

und Ihre js wie folgt aus:

$scope.edit_zip = function(item) { 
$scope.item = item; 
var modal = ngDialog.open({ 
    scope: $scope, 
    template: 'zip_edit.html' 
}); 
} 

HINWEIS: Sie sollten nicht versuchen, den ursprünglichen Array-Index in der ng-Wiederholung zu erhalten, wenn Sie denken Darüber hinaus können Sie es nicht mit filter arbeiten lassen.

+1

Danke ... Ich hatte nicht daran gedacht, nur zipcode_data zu übergeben, und das funktioniert genau so, wie ich es brauche. –