Réinitialiser un modèle avec angular.js

C'est vraiment une question sur JavaScript (alors j'ai ajouté la balise "javascript"). Lorsqu'un objet JavaScript (tel que array $ scope.initial) est affecté à une variable, il est attribué par référence, et non par copie. Donc, cette déclaration

 $scope.datas= $scope.initial; 

Résulte en $ scope.datas pointant vers l'objet $ scope.initial. Toute modification apportée à $ scope.datas ou $ scope.initial affecte le même objet (unique). Étant donné que le modèle ng est utilisé pour lier des données aux éléments d'objet data1 et data2, toute modification des entrées de texte modifiera les éléments data1 et data2 de l'objet que $ scope.datas fait référence, c'est-à-dire $ scope.initial. Pour voir cela en action, ajoutez ce qui suit au HTML de votre violon:

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

Lorsque vous modifiez les valeurs dans les zones de texte, vous verrez que $ scope.initial change également.

@Max a fourni une réponse partielle: utilisez angular.copy () dans la fonction de réinitialisation. Cependant, vous devrez également utiliser angular.copy () dans l'affectation initiale aussi:

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

Mettre à jour:

Comme @EpokK montre dans sa réponse, une solution de rechange est

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

Comme le mentionne @bekite dans sa réponse, @ la solution EpokK ne crée pas d'autre objet.

Le code complet

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

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

Essayez de modifier la fonction de reset pour utiliser angular.copy

 $scope.reset = function () { $scope.datas = angular.copy($scope.initial); }; 

@Mark Rajcok: Ne me méprenez pas, mais je pense que

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

N'est pas une syntaxe alternative pour

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

La façon dont je le comprend:

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

Crée une copie de $ scope.initial et attribue la référence à $ scope.datas.

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

Mises à jour $ scope.datas values ​​with $ scope.initial values

Voir les documents angularjs ( http://docs.angularjs.org/api/angular.copy ), et là le sektion sur l'énoncé Return

Renvoie la copie ou la destination mise à jour, si la destination a été spécifiée.

Syntaxe de travail:

 $scope.reset = function () { angular.copy($scope.initial, $scope.datas); }; 

Référence de l'API : angular.copy(source[, destination]);

Considérez les boutons suivants

• modifier
• sauvegarder
• Annuler

Lorsque l'utilisateur clique sur éditer et modifier les données, puis utilisez le bouton Annuler pour obtenir les anciennes données, voici comment vous pouvez l'implémenter.

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

Les références

• Angulaire.copie
• Poste Orignal

J'aime le commentaire de Yasser: clair et concis.

Je préfère certainement copier la valeur lors de la modification, puis remplacez la référence sur annuler / sauvegarder.

Je préfère lier une copie locale, et non les données d'origine, puis modifier les données finales uniquement en sauvegardant. Cela empêche toutes sortes de bugs plus tard et encapsule le comportement d'édition.

La version finale serait:

 function initValue() { $scope.bound = angular.copy($scope.data); } function setValue() { $scope.data = $scope.bound; } $scope.edit = function () { $scope.editing = true; initValue(); }; $scope.cancel = function () { $scope.editing = false; initValue(); }; $scope.save= function () { $scope.editing = false; setValue(); }; 

J'ai utilisé comme vous l'avez dit ci-dessus en maintenant une sauvegarde, mais tout en l'utilisant, j'ai eu un autre problème.
Je pensais que si je poste ici, il serait utile pour les autres

J'ai le code de section de profil comme ci-dessous:

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

Mais j'ai été surpris de voir que même le profil variable de non-portée était en cours de mise à jour lorsque le modèle change (je suppose que la référence est renvoyée dans ce cas)

Ensuite, j'ai changé mon code comme ceci:

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

Pardonnez-moi s'il n'y a pas de sens …