angular.js - AngularJS双向绑定的选择

Question

AngularJS的双向绑定特性的确很好用，但是在实际使用中遇到了一些问题：我首先使用ng-repeat将数据重复展示出来（item in datas），然后在关联的modal对话框中提供修改功能（将item的对应项使用ng-model绑在modal的form上），但是由于双向绑定的原因，即便未点击保存按钮，在对话框中的修改也会实时影响到页面上的展示数据，这样有些影响体验，有没有好的解决方法呢？我也尝试在js中使用一个中间变量来保存未修改的数据，但是一旦item变化，中间变量也改变了。
相关代码
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)angular.copy(item)

应该在modal里使用一个对象的副本，在用户点击确认后，再将修改提交的副本覆盖掉原来的数据。

使用angualr.copy

オブジェクトのコピーをモーダルで使用する必要があります。ユーザーがクリックして確認すると、変更されて送信されたコピーが元のデータを上書きします。

angualr.copy を使用する理由は、オブジェクトの参照を別の変数に代入するだけでは、目的の効果が得られないためです。

これはAngularドキュメントからのcopyメソッドの説明です

ソースのディープコピーを作成します。これはオブジェクトまたは配列である必要があります。

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