fix(input): detect changes in array when its values are changed

[gonzaloruizdevilla]

When model value is an array, its values must be stored in a new array
to allow a comparison between old and new values when checking
if a value is out of sync with the model.

Closes #1751

[petebacondarwin]

Do you have a use case outside of ngList? If not then perhaps we should look at a more focussed fix on the ngList directive?

Perhaps ngModelController should provide an option to watch the model "deeply", i.e. if this flag is set then compare the model values with angular.equal rather than ===. Then the ng-list directive could set this flag. Moreover other custom directives could use this too.

[gonzaloruizdevilla]

I think that should be the way to go. I can imagine a directive that can map an input value to an object as ngList does to an array. In this case, it won't work again. I'll look at the flag option and I'll make a proposal on this.

[vojtajina]

There are two ways how to watch an expression - shallow and deep (check out http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch third argument).

I think proper fix is to allow configuration for ng-model to specify deep watching. For inputs, it might be fine to do deep watching by default (as most of the time, the watched value is a primitive type), the problem is selects, where you typically watch objects and you wanna compare them by reference.

I'm closing this, as this solution is not what we want.

[vojtajina]

Sorry @petebacondarwin I missed your comment, just read it. Yep, I like your suggestion - that's the right fix.

[gonzaloruizdevilla]

Following some of your suggestions, I made it configurable whether to compare by equality or by reference. When using comparison by equality, the value is copied to $modelValue instead of storing it directly.

You can see the changes in this commit:
f2af60c

@vojtajina About using the $watch's third argument, I'm not sure what do you want to do. Perhaps I'm missing something, but I believe it doesn't change anything to add the third argument, as the watchExpression is a function and it is being called in every digest.

[petebacondarwin]

We also have the new scope.$watchCollection

[petebacondarwin]

@gonzaloruizdevilla - perhaps something like:

ngModelCtrl.$watchValue();
ngModelCtrl.$watchDeep();
ngModelCtrl.$watchCollection();

or more flexible but less well defined

ngModelCtrl.$watchAs('value');
ngModelCtrl.$watchAs('object');
ngModelCtrl.$watchAs('collection');

or more flexible still but potentially tricky

ngModelCtrl.$watchFn = scope.$watch;
ngModelCtrl.$watchFn = function(expression, listener) {
  return scope.$watch(expression, listener, true);
};
ngModelCtrl.$watchFn = scope.$watchCollection;

[groner]

Is there an open issue tracking support for collections with ng-model?

[lrlopez]

Hmmm... I'm just thinking that we could add a new option into ngModelOptions to allow deep model comparation. What do you think?

[groner]

I'm not sure this needs to be exposed to markup. Binding an ng-model as a
collection requires use of a collection specific directive such as ng-list.
I think we just need a way for that directive to influence the
ngModelController behavior.

On Mon, Apr 21, 2014 at 5:04 PM, Luis Ramón López
[email protected]:

Hmmm... I'm just thinking that we could add a new option into
ngModelOptions to allow deep model comparation. What do you think?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/2553#issuecomment-40977037
.