Angular: Wie werden bearbeitete Werte gespeichert?

Question

hier ist mein plnkr http://plnkr.co/edit/0W1SZll1BOK5uuEtdycy?p=preview

im speichern bearbeiteten Werte von meinem bearbeiten Kontakt modal versuchen.

hier ist ein Bearbeitungsverfahren, die aktuellen Wert von Objekt nimmt:

$scope.edit = function(terminal) { 
$scope.name = terminal.name; 
$scope.last = terminal.last; 
$scope.age = terminal.age; 
} 

ich über Winkel Kopie lesen, es etwas anderes? jemand kann mir bitte helfen ill glat zu lernen, wie man das macht

Answer 1

Sie sind viel zusätzliche manuelle Arbeit durch den Verzicht auf ein Objekt in ng-model zu schaffen, in der erste Ort anstelle der Verwendung einzelner Eigenschaften des Bereichs.

Es gibt eine goldene Regel auch, dass if you don't have a dot in ng-model you are doing it wrong

Sie so etwas wie:

<input ng-model="terminal.name"> 
<input ng-model="terminal.age"> 

dann entlang der folgenden Zeilen arbeiten:

$scope.edit = function(terminal) { 
    // store reference to terminal being edited 
    $scope.currentTerminal = terminal; 
    // make a copy so live one is not affected -- will be used in form 
    $scope.terminal = angular.copy(terminal); 
} 

$scope.save = function(){ 
    // update stored original with changes 
    angular.extend($scope.currentTerminal, $scope.terminal); 
    // reset terminal used in form 
    $scope.terminal ={}; 
} 

würde ich dringend empfehlen, Sie loszuwerden jQuery erhalten und bootstrap.js und benutze angular-ui-bootstrap insted

Answer 2

Verwenden Sie angular.copy beim Zuweisen von Wert von Objekt oder Array zu einer anderen Variablen und dieser Objektwert sollte nicht geändert werden.

Ohne tiefe Kopie oder Verwendung von angular.copy, wird der Wert der Eigenschaft geändert oder eine neue Eigenschaft hinzugefügt, um alle Objekte zu aktualisieren, die auf dasselbe Objekt verweisen. Ihr JS sieht dann so aus:

$scope.edit = function(terminal) { 
    $scope.name = angular.copy(terminal.name); 
    $scope.last = angular.copy(terminal.last); 
    $scope.age = angular.copy(terminal.age); 
    } 

Answer 3

Sie müssen den Index der Zeile übergeben, die Sie bearbeiten werden. Übergeben Sie den Index, wenn Sie auf Bearbeiten klicken.

Änderung script.js

$scope.edit = function(terminal,index) { 

    $scope.name = terminal.name; 
    $scope.last = terminal.last; 
    $scope.age = terminal.age; 
    $scope.edit_index = index 

} 


$scope.saveEdit =function(){ 
    index = $scope.edit_index 
    $scope.terminals[index].name = $scope.name; 

    } 

Änderung index.html

<td> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModalLong" ng-click="edit(terminal,$index)">Edit</button> 

<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveEdit()">Save</button> 

http://plnkr.co/edit/GpVB2dUiHCY6NslQDuBe?p=preview