Bind enum values to ng-options angular js

javascript angularjs select ng-options angularjs-ng-options
forgottofly picture forgottofly · Dec 24, 2014 · Viewed 19.7k times · Source

The response JSON from a http GET method is as shown below 

 [
    {
        "1": "Open"
    },
    {
        "2": "Expired"
    }
]

How to bind this data in a select drop down box in angular js. I tried with this option:

<select class="form-control" ng-model="selected" ng-options="item for item in data"> 
<option value="">----Select----</option> 
</select>

But I'm getting [object,object] in the drop down list.

Answer

mcfedr picture mcfedr · Dec 24, 2014

You could transform the json data into the format expected by ng-options simply using Array.reduce, along the lines of

$scope.options = data.reduce(function(memo, obj) {
    return angular.extend(memo, obj);
}, {});

<select ng-model="selected" ng-options="key as val for (key, val) in options"></select>

Full example here http://plnkr.co/edit/PV4BYrz0KBkIFPWVzVaT?p=preview

Related questions

key-value pairs in ng-options

I need to use an associative array as data source for my select options using AngularJS. Is it possible to use an array like this? { "key1": "val1", "key2": "val2", "key3": "val3", ... } and get something like this: <select> <…

Read More
Angularjs - dynamic ng-options

For the need of a directive i'm writing, i have to construct dynamically the ng-options expression. Here is what i tried. In my directive: // ... scope.labelProperty = 'name'; scope.selectOptions = "l." + scope.labelProperty + " for l in list"; In my html template: &…

Read More
Select not selecting when binding with ng-model and ng-options

Here's my select: <select class="form-control" ng-options="assistanceType as assistanceType.name for assistanceType in assistanceTypes" ng-model="selectedRecord.assistanceType"></select> Here's what I'm using to load the Assistance Types: $scope.getAssistanceTypes = function () { $http.get('/api/assistanceType/…

Read More