Как обнаружить изменения в скопированном объекте в Angular?

Question

Как обнаружить изменения в скопированном объекте в Angular?

0

Я использую 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 так как строки равны. Не так ли?

greener 01 дек. 2015, в 17:30

Источник

0

если вы просто проверите str , не будет ли этого достаточно? Вы также можете JSON.stringify (obj) и проверить на равенство
koox00 01 дек. 2015, в 16:35
0

Используйте angular.equals (obj1, obj2) вместо obj1 == obj2.
Jorge Zuverza 01 дек. 2015, в 16:47

Теги:

javascript

angularjs

2 ответа

1

Я думаю, вы должны использовать угловые.равнения вместо использования ссылочного равенства:

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>

Jorge Zuverza 01 дек. 2015, в 15:16

0

Также -> JSON.stringify ($ scope.obj) === JSON.stringify ($ scope.objCopy), хотя angular.equals является лучшим и более безопасным вариантом.
FrailWords 01 дек. 2015, в 16:39
0

Конечно, это будет работать. Я предпочитаю angular.equals, потому что он более явный, и нам не нужно анализировать 2 объекта как строку для простого сравнения.
Jorge Zuverza 01 дек. 2015, в 16:43
0

Право на. Я просто изложил это так, чтобы любой, кто использует «равно», по крайней мере, посмотрел на преимущества этого метода :)
FrailWords 01 дек. 2015, в 16:46

Показать ещё 1 комментарий

Ещё вопросы

если вы просто проверите str , не будет ли этого достаточно? Вы также можете JSON.stringify (obj) и проверить на равенство
Используйте angular.equals (obj1, obj2) вместо obj1 == obj2.
Также -> JSON.stringify ($ scope.obj) === JSON.stringify ($ scope.objCopy), хотя angular.equals является лучшим и более безопасным вариантом.
Конечно, это будет работать. Я предпочитаю angular.equals, потому что он более явный, и нам не нужно анализировать 2 объекта как строку для простого сравнения.
Право на. Я просто изложил это так, чтобы любой, кто использует «равно», по крайней мере, посмотрел на преимущества этого метода :)

Sasi Kiran · Accepted Answer · 2015-12-01T14-24-00.000Z

Использовать угловые равные

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>