Get object property which fired the $watch

Question

When you're using a $watch method (with equality by value). Is there a way to see which object property was changed?

e.g.

/**
                 * Save state of button: Cancelled
                 */
                $scope.$watch('buttons.cancelled', function(newValue, oldValue) {
                    if(newValue != oldValue && newValue !== undefined)  {
                        privates.viewState.buttons.cancelled = $scope.buttons.cancelled;
                    }
                });

                /**
                 * Save state of button: Booked
                 */
                $scope.$watch('buttons.booked', function(newValue, oldValue)    {
                    if(newValue != oldValue && newValue !== undefined)  {
                        privates.viewState.buttons.booked = $scope.buttons.booked;
                    }
                });

Turned into;

        $scope.$watch('buttons', function(newValue, oldValue)   {
            if(newValue != oldValue && newValue !== undefined)  {
                //Is there a way to know which button triggered this watch?
            }
        }, true);

Answer 1

Here is an example.

I would also like to see an angular built-in feature but as for now You need to do that manually

I put the buttons inside array of objects rather than in hash keys because:

• Hash keys are harder to iterate and transform.
• I use ng-model (Difficulty with ng-model, ng-repeat, and inputs)

$watch is invoked with new Value and old Value, just compare them :

$scope.buttons = [
  { name: 'cancelled', checked: false},
  { name: 'booked', checked: false},
  { name: 'something', checked: false}
];

$scope.$watch('buttons',function(newVal,oldVal){
  oldVal = oldVal.reduce(function(p,k){ p[k.name] = k.checked; return p;},{});

  var changed = newVal.filter(function(k){ 
    return oldVal[k.name] !== k.checked;
  });

  changed = changed.reduce(function(p,k){ p[k.name] = k.checked; return p;},{});

 $scope.changed = changed;

},true);