How can I populate a select dropdown list from a JSON feed with AngularJS?
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>
<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.
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>