如何在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 = !($scope.obj == $scope.objCopy);

替換為：

$scope.hasChanges = !angular.equals($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>