Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ng-repeat with <option> binding issues #12005

Closed
RickStrahl opened this issue Jun 2, 2015 · 5 comments
Closed

ng-repeat with <option> binding issues #12005

RickStrahl opened this issue Jun 2, 2015 · 5 comments
Assignees
Milestone

Comments

@RickStrahl
Copy link

I have an odd problem where I cannot get an ng-model value bound to a <select ng-model> to work against a list bound with ng-repeat. I can't duplicate the scenario in a simple plunkr.

This plunkr works, but the same code in an app with more complex layout fails with the first list displaying the wrong item in the first list. In my actual application, I see the model values displayed correctly on the bottom but the actual select list always selects DOG. IOW, the model is correct, but the binding in the select list is not.

The only way I've been able to work around this is to use $timeout() to delay assigning the value which works but is ugly:

        // special handling for 'remembering' selection
        var type = animalService.animalFilter.type;
        vm.filter.type = '';
        $timeout(function () {            
            vm.filter.type = type; 
        },30);

It appears that ng-model on the list is binding before the list is bound and depending on how quickly the page renders this causes a binding issue. The second list which uses static values bind correctly.

I have run into this a few times now, but it throws me off every single time until I remember that I need to delay binding. This really shouldn't be necessary - is there a better way to accomplish this or possibly a binding bug with a timing issue?

@ryanhart2
Copy link
Contributor

There are some comments here that may be relevant #6088. Is there a reason you are not using ng-options?

@RickStrahl
Copy link
Author

I suppose ng-options would work.

In general I don't use ng-options, if the data bound is simple. Using ng-options makes the above code (assuming I didn't have to do the $timeout() bit) more complex by requiring a handler to assign the value to the model as well as requiring the nasty, difficult to visually parse ng-options expression syntax.

Verfied that ng-options works as expected, but does add a bit of overhead as you have to preassign the object, then add an extra handler to assign the value to the actual underlying model, so that solves my immediate problem.

But I still find it curious that ng-repeat binding to options would fail when the data loaded is static.

Thanks.

@ryanhart2
Copy link
Contributor

I updated the plunk to show the ng-options version side-by-side with the ng-repeat version.
http://plnkr.co/edit/YzXSYYzf6DG1cXrcDSgw?p=preview
I only had to add ng-options="type for type in vm.animalTypes" to the select element and then remove this line <option ng-repeat="type in vm.animalTypes" value="{{type}}">{{type}}</option>

Not that it's important for this example, but I also corrected the default options to have value="" instead of value=" ".

@Narretz
Copy link
Contributor

Narretz commented Jun 5, 2015

It works when you use ng-value={{type}} I assume the value attribute isn't interpolated in time for the options directive to pick up the value. It's pretty strange that this doesn't work, since this is the most basic use case for select + ngRepeat.

@Narretz
Copy link
Contributor

Narretz commented Jun 5, 2015

It also works when you use <option ng-repeat="type in vm.animalTypes">{{type}}</option> because the directive will use the text instead of the label. This is crazy.

@Narretz Narretz self-assigned this Jun 16, 2015
Narretz added a commit to Narretz/angular.js that referenced this issue Aug 13, 2015
Previously, the option would only update if the fallback
(the interpolated option text) was used. Now the value attribute will
be observed if it contains an interpolation.

Closes angular#12005
Narretz added a commit to Narretz/angular.js that referenced this issue Aug 13, 2015
Previously, the option would only update if the fallback
(the interpolated option text) was used. Now the value attribute will
be observed if it contains an interpolation.

Closes angular#12005
Narretz added a commit to Narretz/angular.js that referenced this issue Aug 13, 2015
This is for options added without ngOptions.
Previously, an option with an interpolated value attribute would
not be updated if the binding changed, i.e. the select controller would
not recognize the changed option. Now the value attribute will
be observed if it contains an interpolation.

Closes angular#12005
Narretz added a commit to Narretz/angular.js that referenced this issue Aug 27, 2015
This is for options added without ngOptions.
Previously, an option with an interpolated value attribute would
not be updated if the binding changed, i.e. the select controller would
not recognize the changed option. Now the value attribute will
be observed if it contains an interpolation.

Closes angular#12005
Narretz added a commit to Narretz/angular.js that referenced this issue Aug 31, 2015
This is for options added without ngOptions.
Previously, an option with an interpolated value attribute would
not be updated if the binding changed, i.e. the select controller would
not recognize the changed option. Now the value attribute will
be observed if it contains an interpolation.

Closes angular#12005
Narretz added a commit to Narretz/angular.js that referenced this issue Aug 31, 2015
This is for options added without ngOptions.
Previously, an option with an interpolated value attribute would
not be updated if the binding changed, i.e. the select controller would
not recognize the changed option. Now the value attribute will
be observed if it contains an interpolation.

Closes angular#12005
Closes angular#12582
Narretz added a commit to Narretz/angular.js that referenced this issue Aug 31, 2015
This is for options added without ngOptions.
Previously, an option with an interpolated value attribute would
not be updated if the binding changed, i.e. the select controller would
not recognize the changed option. Now the value attribute will
be observed if it contains an interpolation.

Closes angular#12005
Closes angular#12582
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants