Reset-ein Modell mit angular.js

Dies ist wirklich eine Frage über JavaScript (so habe ich den "javascript" - tag). Wenn ein JavaScript-Objekt (wie array $Umfang.erste) wird einer Variablen zugewiesen, dem es zugeordnet ist, die durch Verweis, nicht kopieren. Also, diese Aussage

$scope.datas= $scope.initial;

Ergebnisse in $scope.Daten zeigen auf den $scope.ersten Objekt. Alle änderungen, die vorgenommen werden, $Umfang.Daten oder $Umfang.erste wirken sich beide auf dem gleichen (Einzel -) Objekt. Seit ng-Modell wird verwendet, um data-bind object-Elemente data1 und data2, keine änderungen an den text ein, ändern sich die data1 und data2 Elemente des Objekts, das $scope.Daten-Referenzen-D. H., $Umfang.initial ist. Um dies in Aktion zu sehen, fügen Sie den folgenden, um Ihre Geige HTML:

<p>{{initial}}</p>

Wenn Sie ändern Sie die Werte in die Textfelder, wirst du sehen, dass $Umfang.ersten ändert sich auch.

@Max bereitgestellt, eine partielle Antwort: verwenden Sie eckige.copy() in die reset-Funktion. Aber Sie müssen auch verwenden Sie eckige.copy() bei der erstmaligen Zuweisung zu:

 $scope.datas = angular.copy($scope.initial);

Update:

Als @EpokK zeigt in seiner Antwort, eine Alternative Lösung ist

angular.copy($scope.initial, $scope.datas);

Als @bekite erwähnt in seiner Antwort, @EpokK die Lösung nicht erstellen Sie ein anderes Objekt.

Den vollständigen code

JS:

angular.module('app', []).controller('MyCtrl', function($scope) {
  $scope.initial = [{
    data1: 10,
    data2: 20
  }];
  $scope.datas = angular.copy($scope.initial);
  $scope.reset = function () {
    $scope.datas = angular.copy($scope.initial);
    //or
    //angular.copy($scope.initial, $scope.datas);
  }
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="data in datas">
    <input type="text" ng-model="data.data1" />
    <input type="text" ng-model="data.data2" />
  </div> 
  <a ng-click="reset()">Reset to initial value</a>
  or
  <hr />
  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>{{initial}}
</div>

fiddle

@Mark Rajcok:
Versteh mich nicht falsch, aber ich denke, dass

angular.copy($scope.initial, $scope.datas);

ist nicht eine Alternative syntax für

$scope.datas = angular.copy($scope.initial);

Ich verstehe es so:

$scope.datas = angular.copy($scope.initial);

Erstellt eine Kopie von $scope.anfängliche und weist die Referenz auf $scope.Daten.

angular.copy($scope.initial, $scope.datas);

Updates $Umfang.Daten Werte mit $scope.Anfangswerte

Finden Sie in der angularjs-docs ( http://docs.angularjs.org/api/angular.copy ),und da die sektion über die Return-Anweisung

Gibt Die Kopie oder aktualisiert Bestimmungsort, wenn kein Ziel angegeben wurde.

Betrachten Sie die folgenden Tasten

• Bearbeiten
• Speichern
• Abbrechen

Wenn Nutzer Bearbeiten und Veränderungen Daten und verwendet dann die Abbrechen - button, um die alten Daten, hier ist, wie könnte man dies umsetzen.

HTML

<div>
    <button data-ng-click="edit()" data-ng-show="!editing">Edit</button>
    <button data-ng-click="save()" data-ng-show="editing">Save</button>
    <button data-ng-click="cancel()" data-ng-show="editing">Cancel</button>
</div>

AngularJs

$scope.edit = function () {
    $scope.editing = true;
    $scope.copy = angular.copy($scope.data);
};

$scope.cancel = function () {
    $scope.editing = false;
    $scope.data = $scope.copy;
};

Referenzen

• eckig.kopieren
• Orignal Post

Ich verwendet haben, als Sie alle oben gesagt, durch die Aufrechterhaltung eines back-up, aber während Sie es ich vor einem problem mehr.

Ich dachte, wenn ich es hier posten, es wäre hilfreich für andere

Ich habe Profil-Abschnitt-code wie folgt:

var profileBackup ={};
$scope.profileContinue = function()
{
  profileBackup = angular.copy($scope.userData.profile); 
// profileBackup = $scope.userData.profile; 
//other code
}

$scope.profileCancel = function()
{
$scope.userData.profile = profileBackup;
}

Aber ich war überrascht zu sehen, dass auch non-scope-variable profileBackup aktualisiert wurde, wenn sich das Modell ändert (ich glaube, die Referenz zurückgegeben wird, in diesem Fall)

Dann habe ich meinen code wie folgt:

$scope.profileContinue = function()
{
  profileBackup = angular.toJson($scope.userData.profile); 
// profileBackup = $scope.userData.profile; 
//other code
}

$scope.profileCancel = function()
{
$scope.userData.profile = angular.fromJson(profileBackup);
}

bitte verzeihen Sie mir, wenn es gar keinen Sinn..