AngularJS : check if a model value has changed

Question

IS there a way to check a dirty flag on the model itself, independent of the view?

I need the angular controller to know what properties have been changed, in order to only save changed variables to server.

I have implemented logic regarding if my entire form is dirty or pristine, but that is not specific enough

I could just slap a name and ng-form attribute on every input, to make it recognizable as a form in the controller, but then I end up with a controller that is strongly coupled with the view.

Another not-so appealing approach is to store the initial values that every input is bound to in a separate object, then compare the current values with the initial values to know if they have changed.

I checked Monitor specific fields for pristine/dirty form state and AngularJS : $pristine for ng-check checked inputs

You mean, like, with $watchers? https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch Maybe I'm missing something more specific. Can you clarify? — Antiga, Nov 18 '14 at 17:32
watchers trigeer event with every singe change. what I am looking for is a check to perform during a save operation, detecting what values have changed in order to send only these to the server. its essential yhr same as $pristine, but without needing a separate form for every variable. — CodeToad, Nov 18 '14 at 20:02

score 2 · Accepted Answer · answered Nov 18 '14 at 18:27

2

One option I could think of is

As you get a model/object from service, create a replica of the model within the model and bind this new model to your view.

Add a watch on the new Model and as the model changes, use the replica to compare old and new models as follows

var myModel = {
    property1: "Property1",
    property2: "Property2",
    array1:["1","2","3"]
}
var getModel = function(myModel){
   var oldData = {};
   for(var prop in myModel){
      oldData.prop = myModel[prop];
   }
   myModel.oldData = oldData;
   return myModel;
}
var getPropChanged = function(myModel){
  var oldData = myModel.oldData;
  for(var prop in myModel){
   if(prop !== "oldData"){
    if(myModel[prop] !== oldData[prop]){
        return{
            propChanged: prop,
            oldValue:oldData[prop],
            newValue:myModel[prop]
        }
      }
    }
  }
}

answered Nov 18 '14 at 18:27

Mothupally

750
2
8
16

Thanks for the complete code example. this is essentailly what I describe in the second option mentioned in the question. I will use this approach unless a more compellng solution is available. – CodeToad Nov 18 '14 at 19:56
Welcome Toad. Do not forget to tick the answer :) – Mothupally Nov 19 '14 at 06:20
You may want to check for hasOwnProperty(prop) to avoid an enumeration of prototype properties. if (oldData.hasOwnProperty(prop)){ //handle your business... } – dball Mar 30 '15 at 13:54

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

You may find it easiest to store and later compare against the JSON representation of the object, rather than looping through the various properties.

See Detect unsaved data using angularjs.

edited May 23 '17 at 12:09

Community

1
1

answered Mar 05 '17 at 12:22

Philip Callender

1,465
1
14
21

score 0 · Answer 3 · answered Mar 05 '17 at 14:24

The class shown below may work well for your purpose, and is easily reused across pages.

At the time you load your models, you remember their original values:

    $scope.originalValues = new OriginalValues();

    // Set the model and remember it's value
    $scope.someobject = ...
    var key = 'type-' + $scope.someobject.some_unique_key;
    $scope.originalValues.remember(key, $scope.someobject);

Later you can determine if it needs to be saved using:

    var key = 'type-' + $scope.someobject.some_unique_key;
    if ($scope.originalValues.changed(key, $scope.someobject)) {
       // Save someobject
       ...
    }

The key allows you to remember the original values for multiple models. If you only have one ng-model the key can simply be 'model' or any other string.

The assumption is that properties starting with '$' or '_' should be ignored when looking for changes, and that new properties will not be added by the UI.

Here's the class definition:

function OriginalValues() {
    var hashtable = [ ]; // name -> json

    return {

      // Remember an object returned by the API
      remember: function(key, object) {
        // Create a clone, without system properties.
        var newobj = { };
        for (var property in object) {
          if (object.hasOwnProperty(property) && !property.startsWith('_') && !property.startsWith('$')) {
            newobj[property] = object[property];
          }
        }
        hashtable[key] = newobj;
      },// remember

      // See if this object matches the original
      changed: function(key, object) {
        if (!object) {
          return false; // Object does not exist
        }

        var original = hashtable[key];
        if (!original) {
          return true; // New object
        }

        // Compare against the original
        for (var property in original) {
          var changed = false;
          if (object[property] !== original[property]) {
            return true; // Property has changed
          }
        }
        return false;
      }// changed

    }; // returned object
  } // OriginalValues

AngularJS : check if a model value has changed

3 Answers3