如何檢測Angular中複製對象的更改？

Question

我使用angular.copy克隆對象，這樣我可以發現變化的對象，像這樣：

var app = angular.module('MyApp', []); 
 
app.controller('MyCtrl', function ($scope) { 
 
    $scope.obj = { 
 
    id: 1, 
 
    str: "Hello World" 
 
    }; 
 
    $scope.init = function() { 
 
    $scope.objCopy = angular.copy($scope.obj); 
 
    } 
 
    $scope.hasChanges = false; 
 
    $scope.change = function() { 
 
    $scope.hasChanges = !($scope.obj == $scope.objCopy); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp"> 
 
    <div ng-controller="MyCtrl" ng-init="init()"> 
 
     <input type="text" ng-model="objCopy.str" ng-change="change()" /> 
 
     <pre>obj = {{ obj }}</pre> 
 
     <pre>objCopy = {{ objCopy }}</pre> 
 
     <pre>hasChanges? {{ hasChanges }}</pre> 
 
    </div> 
 
</div>

的問題是，雖然當我添加字符的文本字符串如果我將該字符串編輯回其原始文本，hasChanges變量仍然顯示爲true，則檢測到更改。由於字符串相同，我希望它變成false。他們不是？

Answer 1

使用角等於

var app = angular.module('MyApp', []); 
 
app.controller('MyCtrl', function ($scope) { 
 
    $scope.obj = { 
 
    id: 1, 
 
    str: "Hello World" 
 
    }; 
 
    $scope.init = function() { 
 
    $scope.objCopy = angular.copy($scope.obj); 
 
    } 
 
    $scope.hasChanges = false; 
 
    $scope.change = function() { 
 
    $scope.hasChanges = !angular.equals($scope.obj, $scope.objCopy); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp"> 
 
    <div ng-controller="MyCtrl" ng-init="init()"> 
 
     <input type="text" ng-model="objCopy.str" ng-change="change()" /> 
 
     <pre>obj = {{ obj }}</pre> 
 
     <pre>objCopy = {{ objCopy }}</pre> 
 
     <pre>hasChanges? {{ hasChanges }}</pre> 
 
    </div> 
 
</div>

Answer 2

我認爲你應該使用angular.equals而不是使用一個參考平等：

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

相反的：

$scope.hasChanges = !angular.equals($scope.obj, $scope.objCopy); 

：

$scope.hasChanges = !($scope.obj == $scope.objCopy); 

代之以

請嘗試以下代碼：

var app = angular.module('MyApp', []); 
 
app.controller('MyCtrl', function ($scope) { 
 
    $scope.obj = { 
 
    id: 1, 
 
    str: "Hello World" 
 
    }; 
 
    $scope.init = function() { 
 
    $scope.objCopy = angular.copy($scope.obj); 
 
    } 
 
    $scope.hasChanges = false; 
 
    $scope.change = function() { 
 
    $scope.hasChanges = !angular.equals($scope.obj, $scope.objCopy); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp"> 
 
    <div ng-controller="MyCtrl" ng-init="init()"> 
 
     <input type="text" ng-model="objCopy.str" ng-change="change()" /> 
 
     <pre>obj = {{ obj }}</pre> 
 
     <pre>objCopy = {{ objCopy }}</pre> 
 
     <pre>hasChanges? {{ hasChanges }}</pre> 
 
    </div> 
 
</div>