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 · Accepted 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

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

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   lt 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  gt  lt  custom-dropdown gt    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     lt ul class  uib-dropdown-menu  role  menu  aria-labelledby  btn-append-to-body  gt       lt li role  menuitem  ng-repeat  dropdownItem in vm src  ng-click  vm setValue dropdownItem   gt           lt a ng-click  vm preventDefault  event   href      gt   dropdownItem text   lt  a gt       lt  li gt   lt  ul 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