왜 angularjs가 다른 변수를 변경합니까?

Question

api에서 아약스 데이터를 가져 와서 변수에 저장하고 있습니다. 그리고이 데이터에 대한 변경 사항을 "편집 및 저장"또는 "편집 및 취소"해야합니다. 이 데이터를 표시하고 편집하려면 ng-model을 사용하고 있습니다. 여기

function getData() { 
    $http({ 
     method: 'POST', 
     url: API + '/api/Educations/UserEducations', 
     data: {} 
    }).then(function successCallback(response) { 
     vm.UserData = response.data; 
     vm.CachedUserData = response.data; 
    }) 
} 

그리고 내 HTML입니다 : : 사용자가 취소 버튼을 클릭하면

<div ng-repeat="education in editEducationsCtrl.UserData"> 
    <div>{{education.SchoolName}}</div> 
    <input type="text" ng-model="education.SchoolName"> 

    <button ng-click="editEducationsCtrl.saveChanges()">Save</button> 
    <button ng-click="editEducationsCtrl.cancelChanges()">Cancel</button> 
</div> 

, 나는 HTML 캐시 된 데이터를 기록 할이

여기 내 스크립트입니다. 하지만 vm.CachedUserData 변수에 액세스하려고하면이 캐시 된 데이터가 이미 vm.UserData의 새 값으로 변경된 것을보고 있습니다 ... 어떻게? 내 코드에 함수 액세스 CachedUserData 변수가 없는지 확인했습니다. 심지어 변수 이름을 고유 한 이름으로 변경했지만 결과는 동일합니다.

첫 번째 데이터를 변수에 저장하려고합니다. 그러나 각도는 둘 다 바뀝니다. 2 way 데이터 바인딩은 동일한 아약스 데이터를 연결 한 모든 변수를 변경합니까?

Answer 1

은 당신이 사용하는 것이 좋습니다 angular.copy()는 캐시 할 데이터 바인딩 : 'angular.copy` 또는`객체의 얕은/깊은 복사 angular.merge`이

vm.UserData = response.data; 
vm.CachedUserData = angular.copy(response.data); 

Answer 2

= JavaScript에서 변수를 복제하지 않으면 다른 포인터가 만들어집니다. 즉, vm.UserData과 vm.CachedUserData을 모두 사용하여 변수를 처리 할 수 ​​있습니다. 이 배열 인 경우

: 당신이 JQuery와이있는 경우

• var newObject = jQuery.extend({}, oldObject); :

  ... 
  }).then(function successCallback(response) { 
      vm.UserData = response.data.splice(0); 
      vm.CachedUserData = response.data.splice(0); 
  }) 
  ... 
  

  가 객체 인 경우 그것은 당신이 지금, 당신의 변수를 복제 할 것

• obj = JSON.parse(JSON.stringify(o)); (JQuery 제외)

여기에 JS에서 개체를 복제하기위한 good link이 있습니다.