angulaire.js - Options de liaison bidirectionnelle AngularJS

Question

La fonctionnalité de liaison bidirectionnelle d'AngularJS est en effet très utile, mais j'ai rencontré quelques problèmes en utilisation réelle : j'ai d'abord utilisé ng-repeat pour afficher les données de manière répétée (élément dans datas), puis fournissez la fonction de modification dans la boîte de dialogue modale associée (liant l'élément correspondant au formulaire modal à l'aide de ng-model), mais en raison de la liaison bidirectionnelle, même si le bouton Enregistrer n'est pas cliqué, dans la boîte de dialogue box La modification affectera également l'affichage des données sur la page en temps réel, ce qui affectera l'expérience. Existe-t-il une bonne solution ? J'ai également essayé d'utiliser une variable intermédiaire dans js pour enregistrer les données non modifiées, mais une fois l'élément modifié, la variable intermédiaire change également.
Code associé
html :

<p ng-repeat="item in data">
{{item.name}}
{{item.age}}
</p>
<a data-toggle="modal" data-target="#mySettingModal{{item.id}}" ng-click="fresh(item)">modify</a>
<p class="modal fade" id="mySettingModal{{item.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <p class="modal-dialog" style="z-index: 1050">
        <form name="form">
          <p class="form-group">
            <label for="name" class="control-label">名称:</label>
               <input type="text" class="form-control" id="name" ng-model="item.name" />
          </p>
        </form>
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="reset()">Close</button>
        <button type="button" class="btn btn-primary" ng-click="updateSetting(item)">Save changes</button>
    </p>
  </p>

JS :

$http.get("/").success(function(data) {
  $scope.data = data;
  var interItem;
  $scope.fresh = function(item) {
    interItem = item;
    console.log(interItem);
  };
  $scope.reset = function() {
    console.log(interItem);
  }
});

Answer 1

angular.copy(item)

Une copie de l'objet doit être utilisée dans le modal. Une fois que l'utilisateur a cliqué pour confirmer, la copie modifiée doit écraser les données d'origine.

La raison de l'utilisation de angualr.copy est qu'il copie en profondeur l'objet. Le simple fait d'attribuer la référence de l'objet à une autre variable n'obtiendra pas l'effet souhaité.

Voici la description de la méthode de copie dans la documentation angulaire

Crée une copie complète de la source, qui doit être un objet ou un tableau.

https://docs.angularjs.org/api/ng/function/angular.copy