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

by

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>

More Related Contents:

  1. How do I bind to list of checkbox values with AngularJS?
  2. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  3. How to display length of filtered ng-repeat data
  4. How to handle anchor hash linking in AngularJS
  5. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  6. What’s the recommended way to extend AngularJS controllers?
  7. Losing scope when using ng-include
  8. SyntaxError: Unexpected token o in JSON at position 1
  9. How to get the url parameters using AngularJS
  10. firebase.database is not a function
  11. angularjs to output plain text instead of html
  12. How to access object property with invalid characters
  13. angularjs: allows only numbers to be typed into a text box
  14. Can you pass parameters to an AngularJS controller on creation?
  15. How do I use Bluebird with Angular?
  16. How to implement history.back() in angular.js
  17. Global Ajax error handler with AngularJS
  18. Angular JS custom delimiter
  19. AngularJS How to dynamically add HTML and bind to controller
  20. Access index of the parent ng-repeat from child ng-repeat
  21. Pass variables to AngularJS controller, best practice?
  22. HTTP request from Angular sent as OPTIONS instead of POST
  23. WARNING: Tried to load angular more than once. Angular JS
  24. ng-mouseover and leave to toggle item using mouse in angularjs
  25. In what JS engines, specifically, are toLowerCase & toUpperCase locale-sensitive?
  26. AngularJS ng-include inside of Google Maps InfoWindow?
  27. Tell screen reader that page has changed in Backbone/Angular single-page app
  28. how to fix 404 warnings for images during karma unit testing
  29. How do I pass multiple attributes into an Angular.js attribute directive?
  30. Globally defined AngularJS controllers and encapsulation

Leave a Comment