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)

應該在modal裡使用一個物件的副本，在使用者點擊確認後，再將修改提交的副本覆寫原來的資料。

使用angualr.copy的原因是它將物件深複製，如果只是簡單的將物件的引用賦值給另一個變數是達不到你要的效果的。

這是angular文檔對copy方法的描述

Creates a deep copy of source, which should be an object or an array.

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