Observing the full object (deep watch) using AngularJS

Question

Observing the full object (deep watch) using AngularJS

In this scenario, we have a

angular-resource variable / object

within the scope that serves as form data:

    $scope.form = {
              name: 'bob', 
              email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b969bb99b969b8ad79a9694">[email protected]</a>'
    }

I have implemented a watch function to monitor changes in the name variable.

    $scope.$watch('form.name', function(newVal) {
        if(newVal) {
            alert(newVal)
        }
    });

How can I set up a watch to detect any changes in fields such as name, email, or any other potential values within scope.form?

The ultimate goal is to toggle the 'save' button on the form based on whether the user has made any modifications.

javascript angularjs

Answer 1

Answer №1

When using $watch(), there is an additional parameter that allows for checking object equality (deep watch).

$scope.$watch('form', function(newVal) { //watch the entire object
    if(newVal) {
        alert(newVal);
    }
}, true); //set to "true" for deep watch.

In this case, both methods yield the same outcome: View live demo here (click). However, it's important to note that $watchCollection only performs a shallow watch and won't monitor nested changes.

$scope.$watch('form', function(newForm, oldForm) {
    console.log(newForm.name);
}, true);

Alternatively: (not a deep watch)

$scope.$watchCollection('form', function(newForm, oldForm) {
    console.log(newForm.name); 
});

Answer 2

When using $watch(), there is an additional parameter that allows for checking object equality (deep watch).

$scope.$watch('form', function(newVal) { //watch the entire object
    if(newVal) {
        alert(newVal);
    }
}, true); //set to "true" for deep watch.

In this case, both methods yield the same outcome: View live demo here (click). However, it's important to note that $watchCollection only performs a shallow watch and won't monitor nested changes.

$scope.$watch('form', function(newForm, oldForm) {
    console.log(newForm.name);
}, true);

Alternatively: (not a deep watch)

$scope.$watchCollection('form', function(newForm, oldForm) {
    console.log(newForm.name); 
});

Answer 3

Answer №2

Ever since AngularJS 1.1.x, the recommended method for monitoring multiple values within an array or properties of an object is through the use of $watchCollection. You can learn more about it here: http://docs.angularjs.org/api/ng.$rootScope.Scope

$scope.$watchCollection('form', function(newValues, oldValues) {
    console.log('*** Watch has been triggered. ***');
    console.log('New Names :', newValues);
});

Answer 4

Ever since AngularJS 1.1.x, the recommended method for monitoring multiple values within an array or properties of an object is through the use of $watchCollection. You can learn more about it here: http://docs.angularjs.org/api/ng.$rootScope.Scope

$scope.$watchCollection('form', function(newValues, oldValues) {
    console.log('*** Watch has been triggered. ***');
    console.log('New Names :', newValues);
});

Observing the full object (deep watch) using AngularJS

Answer №1

Answer №2

Similar questions

Using Material UI Autocomplete for Categorical Selections in a ReactJS Application

Javascript is failing to fetch the desired text

Restrict Fineuploader to uploading only one file at a time

Send the NameSpace to the object and store it in the local storage

Use javascript to implement pinch zoom functionality in a canvas element by allowing users to zoom from the

Utilizing mongoose data for rendering in express

Issues with Ajax arise once URL re-routing is activated

Removing an element from a JSON array

Unexpected behavior from vuelidate triggered on blur

Steps for removing all inline styles within an element:1. Access the element's

Error encountered when trying to export XLS file from HTML with style formatting using AlaSql

Invoke a React component within a conditional statement

How can I uniquely identify and edit individual cells within an ng-grid using the bgColor property?

Formatting phone numbers in AngularJS using ng-grid

Ways to add a substantial quantity of HTML to the DOM without relying on AJAX or excessive strings

Combining AngularJS and Java to create dynamic web applications in HTML5 mode

How do you retrieve an element using its tag name?

Identifying a page refresh in Angular 2

JavaScript guide: Converting an array structured by tuples into a multidimensional array

What is the best approach for integrating HTML and JavaScript code into Flutter mobile platforms?