Angular Dynamically load select options based on selected tab

Question

The following code populates a select based on the tab you have selected. My question is how can i do this by loading the select options via api or just an external source?

Plunker

Well you can use the $http service in angular to get some JSON - is that you're referring to? — Jesus is Lord
– Jesus is Lord, Commented Sep 23, 2013 at 19:19
I was more asking exactly how, not just the mechanism ($http | restangular | ...) — dre
– dre, Commented Sep 23, 2013 at 21:02
The purpose was to see if you were aware of the mechanism and how to use it - if you were already familiar then there was no need to explain it (sometimes the asker is already aware of a given technique but it won't work in their situation, etc.). Do you need an actual $http example of what you're trying to accomplish, or do the other answers you received suffice? — Jesus is Lord
– Jesus is Lord, Commented Sep 23, 2013 at 21:05

Fourth · Accepted Answer · 2013-09-23 19:25:44Z

3

Populating selects from an external api is no different. When the controller inits, have it run out and get the options (or better yet, resolve them before he controller is initialized) and bind that scope variable to the select. I.e.

In the controller:

module.controller...function(scope, service) {

  scope.selectOptions = [];

  service.get().then(function(response){
    scope.selectOptions = response.data;
  });

}

In the view:

<select ng-model="selectedDocument" ng-options="option.name for option in selectOptions"></select>

answered Sep 23, 2013 at 19:25

Fourth

9,3811 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan · Accepted Answer · 2013-09-23 19:21:58Z

0

Check out AngularJS's documentation for the $http service
http://code.angularjs.org/1.0.8/docs/api/ng.$http.

With it, you can call an internal (or external) web service that can respond to your input (input being the selected tab id) with the appropriate JSON response.

In your JavaScript you can load these values upfront, or on-demand when clicking on the appropriate tab.

answered Sep 23, 2013 at 19:21

Ivan

1474 bronze badges

Collectives™ on Stack Overflow

Angular Dynamically load select options based on selected tab

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related