AngularJS (1.5.8) - How do I populate a select option list directly from within controller that gets a json object?

Question

I have an AngularJS app that I want to populate a select drop down list from a JSON result.

The controller code gets the json but how do I populate the $scope.states.

My drop down remains empty on the fetch and the res of the page does not render.

$scope.accountAddresses is a JSON container with various data. My concern is only for the shippingState key.

HTML Code

<select name="shippingState" id="shippingState"  ng-model="accountAddresses.shippingState"  class="state form-control" size="1">

Controller JSON Fetch Code

 $http.get( serviceBase + 'Assets/us-states.json').success(function(d){
            $scope.states = d;
      });

I tried ng-repeat="state in $scope.states" but I do not get any data (state abbreviations) in the drop down.

JSON Sample Data

[
    {
        "name": "Alabama",
        "abbreviation": "AL"
    },
    {
        "name": "Alaska",
        "abbreviation": "AK"
    }]

How do I get the population to work like the following html code of options?

 <option value="AK">AK</option>
<option value="AL">AL</option>

EDIT

With the following code

 <select name="shippingState" id="shippingState"  ng-model="accountAddresses.shippingState"  ng-options ="s.abbreviation as s.name for s in states" class="state form-control" size="1">

I get the following, but I need to remove "string:" and label

<option value="string:AL" label="Alabama">Alabama</option>
<option value="string:AK" label="Alaska">Alaska</option>

I have tried with the modification of ng-repeat with no luck. If it is worth mentioning I am using a plugin that styles the drop down. It has the effect of hiding the selection and creates a styled drop down with the dropdown data. — Vahe, Sep 13 '16 at 18:00
using `ng-options` not `ng-repeat` is the best practice. Also note that `$scope` doesn't exist in view...only the properties of `$scope` defined in controller do — charlietfl, Sep 13 '16 at 18:00
Based on the responses I get a drop down with options with label as the state and the inner html as the full state name. Seems I don't need options but instead value should be the abbrevation and InnerHTML equal to the full name. — Vahe, Sep 13 '16 at 18:09
@Vahe - you can modify my answer by changing the "as" from state.name to state.abbreviation and then modifying the "track by" to state.name — Ryan27, Sep 13 '16 at 18:16
Thanks @Ryan27, http://stackoverflow.com/questions/13047923/working-with-select-using-angulars-ng-options is a good example of what I need and seems to adddress the answers as well as well as your comment too. — Vahe, Sep 13 '16 at 18:18

score 3 · Answer 1 · edited Jul 21 '17 at 10:54

3

You can do this using ng-options ,

<select ng-model="selectedItem" ng-options ="s.name  for s in states"></select>

Controller:

  function($scope, $http) {
             $http.get('test.json').then(function (response){
                $scope.states = response.data;
                console.log(response);
        });

DEMO APP

edited Jul 21 '17 at 10:54

Sofiene Djebali

4,398
1
21
27

answered Sep 13 '16 at 18:00

Sajeetharan

216,225
63
350
396

score 1 · Accepted Answer · answered Sep 13 '16 at 18:00

1

You should be using ng-options for this.

Depending on what you want to show:

<select ng-options="state as state.name for state in states track by state.abbreviation" ng-model="accountAddresses.shippingState"></select>

answered Sep 13 '16 at 18:00

Ryan27

453
4
16

AngularJS (1.5.8) - How do I populate a select option list directly from within controller that gets a json object?

2 Answers2

Linked