Simplest way to Load a dropdown from a Javascript array and Set Selected value using angularjs

Question

I have a simple Javascript Array like this:

var directionArray = [{ id: 'N', text: 'North' },
    { id: 'S', text: 'South' },
{ id: 'E', text: 'East' },
{ id: 'W', text: 'West' }];

I have a select element like this:

<select data-ng-model="bbInventory.DIRECTION_OF_TRAVEL"
                name="travelDirection"
                id="travelDirection"
                class="form-control" style="width: 100%"></select>

The goal is to firstly load the options from the array and then select a value once data is available.

I am drawing a blank, any input will be much appreciated

"using angularjs" in the title, javascript and jquery tags in the question. Which is it? — Jesse
– Jesse, Commented Oct 28, 2015 at 17:02
The dropdown can be loaded using pure javascript or jquery. The Selected Option has to be set via Angular. So, all three... — w2olves
– w2olves, Commented Oct 28, 2015 at 17:04
look at the examples in the angular docs: docs.angularjs.org/api/ng/directive/select — Jesse Buitenhuis
– Jesse Buitenhuis, Commented Oct 28, 2015 at 17:15

Fridjon Gudjohnsen · Accepted Answer · 2015-10-28 17:24:23Z

1

A simple setup would be:

$scope.directionArray = [{ id: 'N', text: 'North' },
      { id: 'S', text: 'South' },
      { id: 'E', text: 'East' },
      { id: 'W', text: 'West' }];

And in the html:

<select data-ng-model="bbInventory.DIRECTION_OF_TRAVEL"
        ng-options="item.id as item.text for item in directionArray"
        name="travelDirection"
        id="travelDirection"
        class="form-control" style="width: 100%"></select>

See plunker.

answered Oct 28, 2015 at 17:24

Fridjon Gudjohnsen

8251 gold badge8 silver badges21 bronze badges

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

2 Comments

w2olves Over a year ago

Thank you so much. I can load json array using the same set up right ?

Fridjon Gudjohnsen Over a year ago

Sure, it's all just objects :)

Vanojx1 · Accepted Answer · 2015-10-28 17:21:11Z

1

use ng-options directive

<select ng-model="bbInventory.DIRECTION_OF_TRAVEL" ng-options="option.text for option in directionArray track by option.id"></select>

then to select an option use

$scope.bbInventory.DIRECTION_OF_TRAVEL = $scope.directionArray[whatyouwantindex];

answered Oct 28, 2015 at 17:21

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

1 Comment

w2olves Over a year ago

Thank you. I selected Fridjon's answer as the accepted one simply because of the Plunker and he was a few seconds faster. I believe either of your's or his answer would be helpful to me as well as others who are looking for a similar solution. Thanks again

Collectives™ on Stack Overflow

Simplest way to Load a dropdown from a Javascript array and Set Selected value using angularjs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related