Réinitialiser un modèle avec angulaire.js

J'essaie simplement de réinitialiser les valeurs comme ceci: 

$scope.initial = [
    {
        data1: 10,
        data2: 20
    }            
];


$scope.datas= $scope.initial;


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

Mais il ne produit rien, une idée de le réparer ? 

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

  $scope.datas= $scope.initial;

  $scope.reset = function(){
    $scope.datas = $scope.initial;  
  } 
});
<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     
  <button ng-click="name = initial">Reset to initial value</button>
  <hr />
  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>
</div>

, Il est un exemple de travail sur jsfiddle

35
demandé sur Mosh Feu 2012-10-26 14:18:14

7 réponses

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

$scope.datas= $scope.initial;

Donne $scope.données pointant vers la $scope.l'objet initial. Toutes les modifications qui sont apportées à $champ d'application.les données de dollars ou de portée.initial les deux affectent le même objet (unique). Étant donné que ng-model est utilisé pour lier des éléments d'objet data1 et data2, tout changement à les entrées de texte modifieront les éléments data1 et data2 de l'objet $scope.références de données -- c'est-à-dire $scope.initial. Pour voir cela en action, ajoutez ce qui suit au code HTML de votre violon: 

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

Lorsque vous modifiez les valeurs dans les zones de texte, vous verrez que $scope.initiale est également en train de changer.

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

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

Mise à jour:

Comme le montre @EpokK dans sa réponse, une solution alternative est 

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

Comme le mentionne @bekite dans sa réponse, la solution de @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>

violon

56
répondu Mark Rajcok 2016-01-18 07:10:40

, Essayer de changer de reset la fonction à utiliser angular.copy

$scope.reset = function () {
    $scope.datas = angular.copy($scope.initial);
};
13
répondu Max 2012-10-26 11:00:47

@ Mark Rajcok: Ne vous 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 comprends:

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

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

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

Met à jour $scope.valeurs de données avec $ scope .valeurs initiales

Voir les documents angularjs ( http://docs.angularjs.org/api/angular.copy), et là la sektion sur la déclaration de retour

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

11
répondu bekite 2013-08-13 19:16:37

Syntaxe de travail: 

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

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

8
répondu EpokK 2013-06-28 07:00:25

Considérez les boutons suivants

  • Modifier
  • Enregistrer
  • Annuler

Lorsque l'utilisateur clique sur edit {[14] } et modifie les données, puis utilise le bouton cancel pour obtenir les anciennes données, voici comment vous pouvez implémenter cela.

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

Références à

4
répondu Yasser 2014-05-19 07:07:10

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

Je préfère définitivement copier la valeur lors du démarrage de l'édition, puis simplement remplacer la référence sur cancel/save.

Je préfère lier une copie locale, et non les données d'origine, puis Modifier les données finales uniquement lors de la sauvegarde. Cela empêche toutes sortes de bogues 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();
};
0
répondu Danny R 2015-04-13 12:28:41

J'ai utilisé comme vous l'avez tous dit ci-dessus en maintenant une sauvegarde, mais en l'utilisant, j'ai fait face à un problème de plus.
Je pensais que si je le poste ici, il serait utile aux 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 la variable profileBackup non-scope était mise à jour lorsque le modèle change (je suppose que la référence est retourné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);
}

S'il vous plait pardonnez-moi si ça n'en fait pas sens..

0
répondu JeevanReddy Avanaganti 2015-07-06 08:13:28