Как обнаружить изменения в скопированном объекте в 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>