2014

Angular js Populate dropdown with JSON

Question:

i am new in angular js and learning it. today i got a code to populate dropdown with JSON using angular. here is the code.

<select ng-model="selectedTestAccount" ng-options="item.Id as item.Name for item in testAccounts"> <option value="">Select Account</option> </select> <h2>angular code</h2> 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; }); });

this is not clear to me. ng-options="item.Id as item.Name for item in testAccounts" why as is using between two field name. if i need to specify 3 fields then code would look like ng-options="item.Id as item.Name as item.Desc for item in testAccounts"

please help me to understand <strong>ng-options</strong>

also tell me why this <strong>selectedTestAccount</strong> required ?

this way i populate dropdown but first time a empty row is getting added in dropdown.....why it is happening do not understand.

second issue is when i select country from dropdown then country id is not showing. here is my code. please have a look and guide me.

<div ng-controller="DemoCtrl" ng-app="main">

populate select options with ajax

<select name="cboCountry" ng-model="selectedCountry"> <option ng:repeat="facility in chooseCountries" value="{{facility.id}}">{{facility.name}}</option> </select> <span>Selected country id is {{selectedCountry.countryId}}</span> </div> var app = angular.module('main', []); app.controller('DemoCtrl', function ($scope) { $scope.chooseCountries=[ {countryId : 1, name : "France - Mainland", desc: "some description" }, {countryId : 2, name : "Gibraltar", desc: "some description"}, {countryId : 3, name : "Malta", desc: "some description"} ]; $scope.selectedCountry = angular.copy($scope.chooseCountries[0]); });

thanks

Answer1:

try like this.

<pre class="snippet-code-js lang-js prettyprint-override">var app = angular.module('main', []); app.controller('DemoCtrl', function ($scope) { $scope.chooseCountries=[ {countryId : 1, name : "France - Mainland", desc: "some description" }, {countryId : 2, name : "Gibraltar", desc: "some description"}, {countryId : 3, name : "Malta", desc: "some description"} ]; $scope.selectedCountry = $scope.chooseCountries[0].countryId; }); <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="DemoCtrl" ng-app="main"> <select ng-model="selectedCountry" ng-options="item.countryId as item.name for item in chooseCountries"> <option value="">Select Account</option> </select> </div>

Answer2:

you can use code like also

<select ng-model="selectedTestAccount"> <option value="">Select Account</option> <option ng-repeat="item in testAccounts" value="item.Id">{{item.Name}} </option></select>

you want use more field you can use like

<select ng-model="selectedTestAccount"> <option value="">Select Account</option> <option ng-repeat="item in testAccounts" value="item.Id"> {{item.Id}}-{{item.Name}} </option></select>

This selectedTestAccount is work same like "Id" in javascript which help to get selected value

Answer3:

it may because id and name is field in item-array in testAccounts of scope from response to get request. try to debug set breakpoint in controller logic you get clear idea.

Answer4:

try this

<div ng-controller="DemoCtrl" ng-app="main"> <select ng-model="selectedCountry"> <option value="">Select Account</option> <option ng-repeat="x in chooseCountries" value="{{x.countryId}}" >{{x.name}}</option> </select> </div>

And script code

var app = angular.module('main', []); app.controller('DemoCtrl', function ($scope) { $scope.chooseCountries=[ {countryId : 1, name : "France - Mainland", desc: "some description" }, {countryId : 2, name : "Gibraltar", desc: "some description"}, {countryId : 3, name : "Malta", desc: "some description"} ]; $scope.selectedCountry = $scope.chooseCountries[1].countryId.toString(); });

Recommend

  • Selects droplist inside ngTable loses its scope
  • AngularJS $scope not watching changes from View
  • Why is ng-class based ng-animate transition not working?
  • Why is django manage.py syncdb failing to create new columns on my development server?
  • Changing Jupyter Notebook start up folder by modifying “start in” not working any more
  • Configure nginx to return different files to different authenticated users with the same URI
  • How to override value that appears in a dropdown in the rails_admin gem
  • Pass value from viewmodel to script in zk
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Optimizing database types to compact database (SQLite)
  • How do I fake an specific browser client when using Java's Net library?
  • Trying to switch camera back to front but getting exception
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • Do I've to free mysql result after storing it?
  • QuartzCore.framework for Mono Develop
  • Python - Map / Reduce - How do I read JSON specific field in using DISCO count words example
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Circular dependency while pushing http interceptor
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • AngularJs get employee from factory
  • Free memory of cv::Mat loaded using FileStorage API
  • How to set the response of a form post action to a iframe source?
  • Angular 2 constructor injection vs direct access
  • embed rChart in Markdown
  • Change div Background jquery
  • Turn off referential integrity in Derby? is it possible?
  • LevelDB C iterator
  • JaxB to read class hierarchy
  • Programmatically clearing map cache
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • How can i traverse a binary tree from right to left in java?
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?