dynamically update select options (dropdown) on "click"

[Brian Elliott]

I'm an angular (and javascript) newb, but I've searched around and haven't found a simple solution or explanation of my specific issue. I'm attempting what I would suspect is a fairly common task of updating the contents of a selection dropdown with the results of an XHR request. Because I'm already loading quite a bit of my view dynamically, I want to only update some selection boxes if the user clicks on them.  An example of what I'm doing can be seen here: 

http://plnkr.co/edit/wEdFK7G8kQ2YDEXtNSav?p=preview

What's interesting is that Firefox updates/re-renders the dropdown on the DOM change, but Chrome and Safari do not. Is this a browser limitation or is there some angular-foo I'm missing that will make the dropdown update on all (angular-supported) browsers?

N.B. It looks like select2 in angular-ui would solve my issue, but I'd like to know if there's a native angular solution or that I'm simply "doing it wrong".

Thanks!

[Tim Gronkowski]

Thanks Brian. This has helped me with an issue I was having (for now). But, I agree that it seems inconsistent with angular. I would think that the data binding should allow for dynamically changing the options without requiring the mousedown action to force the load.

[Tim Gronkowski]

I think I figured out a way that seems more angular:

 - use a function getCardModelOpts() that returns the list, then just use it in the select in place of cardModelOpts.
 - remove the mousedown action
 - you can edit the list in any background function and it will be updated dynamically in the select
 - caveat: I haven't tested this outside of Firefox and IE9.

HTH!

On Friday, February 1, 2013 7:09:41 PM UTC-6, Brian Elliott wrote:

[W White]

I'm having the same problem.  I need to create a select box which will query the backend only when the user clicks on it (I'm currently using an ng-focus directive for that), and should display "Loading..." until the AJAX request succeeds.  Importantly, I don't want the XHR request (I'm actually using Restangular) to occur until/unless the user clicks on the select box, as in some instances, the request may depend upon other form elements.

Tim's suggestion seems to require that the XHR request occur when the form is rendered, and precludes the "Loading..." dropdown, and doesn't seem to work in Chrome anyway.

The problem here is that, in Chrome at least, when the backend request succeeds and the select options are filled in, the dropdown list will only show the first option (or, to be technically correct, the same number of options as in the initial list).  I know this is possible to achieve in Chrome (I'm porting an app from Ext JS, where select boxes tied to an AJAX backend work fine).

I may investigate select2, but this seems like such a common task that I can't help but think I'm doing something wrong.