Vahe Vahe - 1 year ago 91
AngularJS Question

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

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.


<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>


With the following code

<select name="shippingState" id="shippingState" ng-model="accountAddresses.shippingState" ng-options ="s.abbreviation as 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>

Answer Source

You should be using ng-options for this.

Depending on what you want to show:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download