Using $watchCollection to determine the dirty/pristine status of a model

Question

Angular

There is a model that is loaded from the server. There is a management page for this model. I would like to enable the "Save" button only with a "dirty" model. Using the possibilities of forms is not very convenient, since there are inputs that are not directly related to the model.

So if I use $watchCollection like this

$scope.$watchCollection('ruleset.rules', function() {
                               $scope.rulesetChanged = true;
                        });
$scope.rulesetChanged = false;

the problem of the first comparison arises: for the first time, in any case, an empty object is compared with a filled one.

Do something like

var cases = 0;
$scope.$watchCollection('ruleset.rules', function() {
                             if (cases > 0) {    
                                 $scope.rulesetChanged = true;
                             }
                             cases ++;
                        });
$scope.rulesetChanged = false;

somehow I really don't want to. Maybe there is some angular way to solve this problem? For example, how to visit an old object?

Answer 1

solved the problem by copying the original model (angular.copy) and the comparison function.

Answer 2

You can just see if the oldValue that is passed to the callback is undefined.