How can I populate a select dropdown list from a JSON feed with AngularJS?

Question

I have been looking hard for examples but could not find anything at all. The only thing I know is that I could use the http module to get my data. Here is what I am currently doing, but it's coded with Knockout. Can someone give me some advice on how I could recode this feature using AngularJS?

HTML

<select id="testAccounts" 
   data-bind="options: testAccounts, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select Account', value: selectedTestAccount">
</select>

Javascript

<script type='text/javascript'>
    $(document).ready(function () {

        var townSelect = function () {
        var self = this;
        self.selectedTestAccount = ko.observable();
        self.testAccounts = ko.observableArray();
        var townViewModel = new townSelect();
        ko.applyBindings(townViewModel);

        $.ajax({
            url: '/Admin/GetTestAccounts',
            data: { applicationId: 3 },
            type: 'GET',
            success: function (data) {
                townViewModel.testAccounts(data);
            }
        });
    });
</script>

StepUp · Accepted Answer · 2016-09-07 16:13:14Z

148

The proper way to do it is using the ng-options directive. The HTML would look like this.

<select ng-model="selectedTestAccount" 
        ng-options="item.Id as item.Name for item in testAccounts">
    <option value="">Select Account</option>
</select>

JavaScript:

angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
    $scope.selectedTestAccount = null;
    $scope.testAccounts = [];

    $http({
            method: 'GET',
            url: '/Admin/GetTestAccounts',
            data: { applicationId: 3 }
        }).success(function (result) {
        $scope.testAccounts = result;
    });
});

You'll also need to ensure angular is run on your html and that your module is loaded.

<html ng-app="test">
    <body ng-controller="DemoCtrl">
    ....
    </body>
</html>

edited Sep 7, 2016 at 16:13

StepUp

38.5k16 gold badges94 silver badges158 bronze badges

answered Mar 28, 2013 at 17:35

Martin

8,8662 gold badges37 silver badges36 bronze badges

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

3 Comments

JeffryHouser Over a year ago

This tripped me up; so I thought I'd make a comment here. If the ng-model is not specified the ng-options appears to have no affect. Otherwise, +1; thanks for the answer.

chrisinmtown Over a year ago

Would someone please post the expected JSON? TIA

Dimitre Novatchev Over a year ago

Martin, This will execute the $http() immediately. Is it possible to populate the dropdown only if a specific event occurs -- such as the user selecting one of many radio-buttons? If yes, where to find working code examples? To put it in other words, how to implement lazy-loading, on demand dropdown (via AJAX) list ?

TGarrett · Accepted Answer · 2016-08-29 17:30:25Z

35

<select name="selectedFacilityId" ng-model="selectedFacilityId">
         <option ng-repeat="facility in facilities" value="{{facility.id}}">{{facility.name}}</option>
     </select>

This is an example on how to use it.

edited Aug 29, 2016 at 17:30

TGarrett

5524 silver badges15 bronze badges

answered Mar 28, 2013 at 17:28

smk

5,9726 gold badges30 silver badges41 bronze badges

2 Comments

lorraine batol Over a year ago

I think it should be ng-repeat not ng:repeat :)

Wtower Over a year ago

Please note that this is more memory intensive than the accepted answer: docs.angularjs.org/api/ng/directive/ngOptions

Bernardo · Accepted Answer · 2015-11-24 15:01:08Z

In my Angular Bootstrap dropdowns I initialize the JSON Array (vm.zoneDropdown) with ng-init (you can also have ng-init inside the directive template) and I pass the Array in a custom src attribute

<custom-dropdown control-id="zone" label="Zona" model="vm.form.zone" src="vm.zoneDropdown"
                         ng-init="vm.getZoneDropdownSrc()" is-required="true" form="farmaciaForm" css-class="custom-dropdown col-md-3"></custom-dropdown>

Inside the controller:

vm.zoneDropdown = [];
vm.getZoneDropdownSrc = function () {
    vm.zoneDropdown = $customService.getZone();
}

And inside the customDropdown directive template(note that this is only one part of the bootstrap dropdown):

<ul class="uib-dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
    <li role="menuitem" ng-repeat="dropdownItem in vm.src" ng-click="vm.setValue(dropdownItem)">
        <a ng-click="vm.preventDefault($event)" href="##">{{dropdownItem.text}}</a>
    </li>
</ul>

Collectives™ on Stack Overflow

How can I populate a select dropdown list from a JSON feed with AngularJS?

3 Answers 3

3 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Linked

Related