Want to $watch an object in Angular, but ignore changes on certain properties?  Here’s a function that will help you out:

function diff(obj1, obj2, exclude) {
    var r = {};

    if (!exclude) exclude = [];

    for (var prop in obj1) {
        if (obj1.hasOwnProperty(prop)) {
            if (exclude.indexOf(obj1[prop]) == -1) {

                // check if obj2 has prop
                if (!obj2.hasOwnProperty(prop)) r[prop] = obj1[prop];

                // check if prop is object, if so, recursive diff
                else if (obj1[prop] === Object(obj1[prop])) {
                    if (obj2[prop] == undefined || obj2[prop] == null)
                        r[prop] = obj2[prop];
                    else {
                        var difference = diff(obj1[prop], obj2[prop]);
                        if (Object.keys(difference).length > 0) r[prop] = difference;
                    }
                }

                // check if obj1 and obj2 are equal
                else if (obj1[prop] !== obj2[prop]) {
                    if (obj1[prop] === undefined)
                        r[prop] = 'undefined';
                    if (obj1[prop] === null)
                        r[prop] = null;
                    else if (typeof obj1[prop] === 'function')
                        r[prop] = 'function';
                    else if (typeof obj1[prop] === 'object')
                        r[prop] = 'object';
                    else
                        r[prop] = obj1[prop];
                }
            }
        }

    }

    return r;
}

And here’s how to use it…

$scope.$watch(function () { return vm.objectToWatch; }, function(newValue, oldValue) {

var difference = diff(newValue, oldValue,
        [ 
            newValue.ignoredProp1,
            newValue.ignoredProp2,
            newValue.ignoredProp3,
            newValue.ignoredProp4, 
        ]);

// If 'difference' is empty, then return 
if (Object.keys(difference).length === 0) return;

// 'difference' contains properties that we DON't want to ignore so do something...

}, true);

And, finally a jsfiddle example.

Like What You See?

Subscribe to receive new posts in your inbox.

Privacy Preference Center