Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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> 
like image 963
Alan2 Avatar asked Mar 28 '13 17:03

Alan2


1 Answers

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> 
like image 123
Martin Avatar answered Oct 10 '22 11:10

Martin