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(항목)angular.copy(item)

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

使用angualr.copy

객체의 복사본이 모달에서 사용되어야 합니다. 사용자가 확인을 클릭하면 수정 및 제출된 복사본이 원본 데이터를 덮어쓰게 됩니다.

angualr.copy를 사용하는 이유는 단순히 객체의 참조를 다른 변수에 할당하는 것만으로는 원하는 효과를 얻을 수 없기 때문입니다.

Angular 문서의 복사 방법에 대한 설명입니다

객체 또는 배열이어야 하는 소스의 전체 복사본을 생성합니다.

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