Check $pristine status of ngModel without using a form

Question

Am trying to figure out how to check the state of a ngModel without using a form tag. I don\'t have wrappers is just basic input element with a ngModel.

All the example

Answer 1

I used Ben Lesh's answer to deal with the same problem. I was displaying a list of notification preferences, and my goal was to hit my api with models that had changed. Not just ng-changed, either; value changed.

I start by initializing some private state on my controller:

// Private state
var originalModels = {};
var changedModels = [];

Then I store copies of the original models retrieved from the API:

// Create a hash of copies of our incoming data, keyed by the unique Code
for (var i = 0; i <= data.length - 1; i++) {
    var np = data[i];
    originalModels[np.Code] = angular.copy(np);
}

Next, we want to make sure that when a model changes, we add it to a changed models collection (or remove it from the collection if no real change occurred):

function modelChanged(m) {
    var originalModel = originalModels[m.Code];
    var hasChanged = !angular.equals(originalModel, m);

    // If the model has changed and is not present in our collection of changed models, add it
    if (hasChanged && changedModels.indexOf(m) === -1) {
        changedModels.push(m);
    }

    // If the model has not changed and is present in our collection of changed models, remove it
    if (!hasChanged && changedModels.indexOf(m) > -1) {
        var i = changedModels.indexOf(m);
        changedModels.splice(i, 1);
    }
}

Finally, we tie these together in our ng-repeat:

    {{np.DisplayName}}
    
        
    

Now, instead of pushing back every row to my API, I simply push the changed models. This also has a side benefit of being able to ng-disable your submit button if nothing has actually changed (ie the changedModels collection is empty).