How to know the changed property of an object using angularJS

Question

app.controller('indexController', ['$scope', 'authService', function ($scope, authService) {

    var vm = this;

    vm.$onInit = function () {
        vm.active = {
            "home": true,
            "welcome": false,
            "user": false,
            "logout": false,
            "login": false,
            "signup":false
        };
    };

    $scope.$watch('vm.active', function (newObj, oldObj) {
        // How to detect which property has changed ?
    }, true);

}]);

This way i tried, but i don't know how can i detect in watch(shown in my example code), which property has changed.

@DaveNewton Yes. Say, if i make user = true then i want "user" property. — Arif, Aug 15 '17 at 19:50

score 2 · Accepted Answer · answered Aug 15 '17 at 19:57

You can run on the keys of one of the object, and filter it by the value. Something like that:

const obj1 ={
    "home": true,
    "welcome": false,
    "user": false,
    "logout": false,
    "login": false,
    "signup":false
};

const obj2 = {
    "home": true,
    "welcome": false,
    "user": false,
    "logout": true,
    "login": true,
    "signup":false
};

const diff = Object.keys(obj1).filter((key) => obj1[key] !== obj2[key])

h01001000 · Answer 2 · 2017-08-15T20:02:11.920

const obj1 ={
    "home": true,
    "welcome": false,
    "user": false,
    "logout": false,
    "login": false,
    "signup":false
};

const obj2 = {
    "home": true,
    "welcome": false,
    "user": false,
    "logout": true,
    "login": true,
    "signup":false,
    "somethingNew": false
};


for (myProperty in obj2){
    if (obj2[myProperty] !== obj1[myProperty]){
        alert(myProperty + ' has changed!');
    }
}

I believe this should do the trick using a for...in loop.

score 0 · Answer 3 · answered Aug 15 '17 at 19:58

i think watcher can't detect and property that's changed , you can make trick solution by using watchGroup or watchCollection ( see $watchCollection will shallow watch the properties on a single object and notify you if one of them changes.

$watchGroup however watches a group of individual watch expressions.)

also you can check ( how to know which object property changed? ).

How to know the changed property of an object using angularJS

3 Answers3