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>

angular code

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 ng-options

also tell me why this selectedTestAccount 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">
 <p>populate select options with ajax</p>

<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

at bottom i post json data with code again. have a look please. — Mou
– Mou, Commented Apr 4, 2016 at 11:00

User · Accepted Answer · 2016-04-04 11:06:59Z

3

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

answered Apr 4, 2016 at 11:06

User

1,3735 gold badges29 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mou Over a year ago

i test your code and set selectedTestAccount this way but did not work $scope.selectedTestAccount = $scope.chooseCountries[0].countryId; no country data is selected when dropdown render......what is missing in your code. give me jsfiddle.

Mou Over a year ago

thanks it is working now. tell me when ng-value="x.countryId" set selected country this way $scope.selectedCountry = $scope.chooseCountries[1].name then how it is working because i am refering name but ng-value refer to country id. help me to understand. thanks

Mou Over a year ago

i change a bit to select country this way but this line is not working ` $scope.selectedCountry = $scope.chooseCountries[1].countryId.toString(); ` what error is there?

User Over a year ago

I tried with this two change ng-value="x.countryId" and $scope.selectedCountry = $scope.chooseCountries[1].name but i got empty row Please execute changes properly. how its working

Mou Over a year ago

do not understand what r u trying to say? please help me to identity what is the error?

Hadi · Accepted Answer · 2016-04-04 11:09:09Z

2

try like this.

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;
});

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

answered Apr 4, 2016 at 11:09

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

4 Comments

Mou Over a year ago

do not understand this line 'item.countryId as item.name for item in chooseCountries'. why we need to specify field name with as keyword because we use as keyword for specify alias in sql. guide me plzz

user2136053 Over a year ago

It is similar to DataTextfield and DataValueField in C#.DataTextField is the one what it will be displayed in dropdownlist and DataValueField is what value you will get on selection in code that we may require to implement some bussiness logic.In this case,item.name is the value you see in the dropdown list and item.id is the datatext field which is used for manipulating business logic.

WhoAmI Over a year ago

What if my I have json value like this [{ "FRIDAY": [{ "ID": 1, "Name": "xyz" }] }] and I want to pick Name ? I tried as your method by FRIDAY.Name; but my data is coming null ?

Hadi Over a year ago

But your data structure is different with OP's data structure. what you want exactly?

Abhishek Kadam · Accepted Answer · 2016-04-04 11:01:48Z

0

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.

answered Apr 4, 2016 at 11:01

Abhishek Kadam

571 silver badge9 bronze badges

Comments

User · Accepted Answer · 2016-04-05 10:21:31Z

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();   
});

Collectives™ on Stack Overflow

Angular js Populate dropdown with JSON

angular code

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

angular code

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Linked

Related