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   lt select id  testAccounts      data-bind  options  testAccounts  optionsValue   Id   optionsText   Name   optionsCaption   Select Account   value  selectedTestAccount  gt   lt  select gt    Javascript   lt script type  text javascript  gt        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                                      lt  script gt

User · Answer

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>

User · Answer

lt select name  selectedFacilityId  ng-model  selectedFacilityId  gt            lt option ng-repeat  facility in facilities  value    facility id    gt   facility name   lt  option gt        lt  select gt      This is an example on how to use it

User · Answer

The proper way to do it is using the ng-options directive  The HTML would look like this    lt select ng-model  selectedTestAccount           ng-options  item Id as item Name for item in testAccounts  gt       lt option value    gt Select Account lt  option gt   lt  select gt    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    lt html ng-app  test  gt       lt body ng-controller  DemoCtrl  gt                lt  body gt   lt  html gt

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

Examples related to javascript

Examples related to angularjs

Examples related to drop-down-menu