Loading dynamic data into select box options in angularjs

Question

Below is part of code from my controller

restApp.getAllcomponents().then(function(data){
        $scope.compList = data.components;
        var j=0;
        while(j < $scope.compList.length){
            $scope.allOptions = $scope.compList[j];
            console.log($scope.allOptions);
            j++;
        }
 });

View

<div class="field-box">
    <label>Components:</label>
    <!--Here I need select box with dynamic generated options-->
</div>

Above console.log prints like

Object {id: 27, name: "loruth water point", latitude: 4.453488123, longitude: 35.36021409} adminContentAttachmentsTabCtrl.js:33
Object {id: 28, name: "kibish", latitude: 5.286289986, longitude: 35.82917452} adminContentAttachmentsTabCtrl.js:33
Object {id: 30, name: "Ekalale", latitude: 4.434588531, longitude: 35.72135923} adminContentAttachmentsTabCtrl.js:33
Object {id: 34, name: "karubangorok", latitude: 4.506236007, longitude: 35.4201746} adminContentAttachmentsTabCtrl.js:33
Object {id: 35, name: "nakitoe kakumon", latitude: 4.214576564, longitude: 35.35912495} adminContentAttachmentsTabCtrl.js:33
Object {id: 36, name: "kaikor mission", latitude: 4.516645656, longitude: 35.42262991}

So what I need here is to load the response data into my select box, 'id' in option value and 'name' in content of option.

How can I do this? Any help...

Why would you want to do that when value with item index helps you later to access that item in the list? — Ahmad
– Ahmad, Commented Aug 27, 2014 at 12:11
my criteria is just to load the dynamic data into dropdownbox — vamsi
– vamsi, Commented Aug 27, 2014 at 12:17
I have made a demo using a static list, you can replace it with your dynamic one, also added example if reading the selected item — Ahmad
– Ahmad, Commented Aug 27, 2014 at 12:24

Ahmad · Accepted Answer · 2014-08-27 12:21:07Z

Here is how you generate a select from your list, Im using a static list, just replace it with your dynamic one.

JavaScript

angular.module('app', []).controller('MyCtrl', function($scope) {
    $scope.list = [{
        id: 27,
        name: "loruth water point",
        latitude: 4.453488123,
        longitude: 35.36021409
    },
    {
        id: 28,
        name: "kibish",
        latitude: 5.286289986,
        longitude: 35.82917452
    },
    {
        id: 30,
        name: "Ekalale",
        latitude: 4.434588531,
        longitude: 35.72135923
    },
   {
        id: 34,
        name: "karubangorok",
        latitude: 4.506236007,
        longitude: 35.4201746
    },
    {
        id: 35,
        name: "nakitoe kakumon",
        latitude: 4.214576564,
        longitude: 35.35912495
    },
   {
        id: 36,
        name: "kaikor mission",
        latitude: 4.516645656,
        longitude: 35.42262991
    }];

});

HTML

<div ng-app="app">
    <div ng-controller="MyCtrl">
         <h2>List:</h2>
        <select ng-model="selectedItem" ng-options="item.name for item in list">
            <option value="">-- choose --</option>
        </select>
         <h2>Selected:</h2>
            {{selectedItem.name}}
    </div>
</div>

DEMO http://jsfiddle.net/U3pVM/8388/

Coder John · Accepted Answer · 2014-08-27 13:15:39Z

2

$scope.list = [{
        id: 27,
        name: "loruth water point",
        latitude: 4.453488123,
        longitude: 35.36021409
    },
    {
        id: 28,
        name: "kibish",
        latitude: 5.286289986,
        longitude: 35.82917452
    },
}];

<select class="ui-select" data-ng-options="r.id as r.name for r in list "                                                        name="status" data-ng-model="users.status">
  <option value="">--Select--</option>
</select>

Hope that helps :)

answered Aug 27, 2014 at 13:15

Coder John

7864 silver badges7 bronze badges

Comments

rchawdry · Accepted Answer · 2014-08-27 13:06:08Z

1

Your HTML just needs to look like this:

<div class="field-box">
    <label>Components:</label>
    <select ng-model="selectedItem" ng-options="item.name for item in compList"></select>
</div>

answered Aug 27, 2014 at 13:06

rchawdry

1,2861 gold badge10 silver badges15 bronze badges

Collectives™ on Stack Overflow

Loading dynamic data into select box options in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related