Wie nur bestimmte Zeilen zu aktualisieren, wenn Sie ng-repeat verwenden

Question

Ich habe eine Benutzeroberfläche ähnlich wie Excel, wo der Benutzer die Daten ändern kann, in denen je Zeile er will. Derzeit verwende ich ng-repeat, um die vorhandenen Daten nach dem Abrufen von mongoDB anzuzeigen. Diese Daten sind ein Array von Json-Objekten, so dass ng-repeat funktioniert. Jetzt möchte ich eine einzige Schaltfläche zum Speichern, klicken Sie auf, alle Änderungen sollten gespeichert werden. Meine Frage ist, wie man behält oder weiß, welche Zeilen geändert worden sind ?? Ich kann nur das gesamte Array senden und in der Datenbank aktualisieren, aber wenn die Anzahl der Zeilen groß ist und Daten von nur einer Zeile geändert haben, wird es einen unnötigen Overhead geben. Lassen Sie mich wissen, wie dies optimiert werden kann.

Vielen Dank im Voraus

Answer 1

ein ng-Änderungsereignis Felder hinzufügen, wo sie die Werte bearbeiten können.

Auf ng-change, setzen Sie einen neuen Schlüssel 'Modified: True' auf 'Obj in Objekten'.

Etwas wie folgt aus:

<div ng-repeat="row in rows track by $index"> 
    <input type="text" ng-change="markAsChanged($index)" ng-model="row.textValue"> 
</div> 

Und Ihre JS:

$scope.markAsChanged = function(index) { 
    $scope.rows[index].changed = true; 
} 

Dann Ihre Update-Funktion können alle Zeilen durchlaufen und stattdessen für die Aktualisierung von geänderten Zeilen an den Webservice senden senden sie alle.

Answer 2

$scope.rowsChanged = []; 
 

 
$scope.Changed = function(row) { 
 
    $scope.rowsChanged.push(row); 
 

 
}

<div ng-repeat="row in rows track by $index"> 
 
    <input type="text" ng-change="Changed(row)" ng-model="row.textValue"> 
 
</div>

Hope it .. kann

Answer 3

Dieses Ding durch die Aufrechterhaltung eines Arrays, die Index für alle Zeilen enthalten erreicht hilft, die sich geändert hat. Wenn Sie auf die Schaltfläche Speichern klicken, wird für dieses Array eine Iteration benötigt (für Zeilen, die sich geändert haben). Ein neuer $ Index kann jederzeit an dieses Array gesendet werden, wenn der Benutzer gerade auf eine Zeile klickt oder eine Eingabe im Array ändert. HTML:

<div ng-repeat="row in rows track by $index"> 
    <input type="text" ng-change="markAsChanged($index)" ng-model="row.textValue"> 
</div> 

Controller:

var listOfChangedRows = []; 
$scope.markAsChanged = function(index){ 
if(listOfChangedRows.indexOf(index)==-1) 
{ 
listOfChangedRows.push(index); 
} 
} 

// Schaltfläche Speichern

Clicked

$scope.saveEditedRows = function(){ 
var updatedItems = []; 
for(var i=0;i<listOfChangedRows.length;i++) 
{ 
updatedItems.push($scope.rows[i]); 
} 
//Now send the updatedItems array to web service 
}