1

i populate drop down this way and data is coming but no data has been selected when dropdown shown first time. here is my code. please have a look and tell me where i made the mistake.

<div ng-controller="DemoCtrl" ng-app="main">
<select ng-model="selectedCountry">
<option value="">Select Account</option>
<option ng-repeat="item in chooseCountries" value="item.countryId">
  {{item.countryId}}-{{item.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 = $scope.chooseCountries[0].countryId;
});
Improve this question
1
  • ngValue not value Commented Apr 4, 2016 at 11:45

3 Answers 3

Reset to default
2

More better way to go for it would be using ng-options directive.

<select ng-model="selectedCountry" 
  ng-options="country.countryId as (country.name+'-'+country.desc) for country in chooseCountries">
</select>

Demo here

Why ng-repeat approach wouldn't work?(Just for explanation, not recommending to use)

You should fill option value attribute with countryId correctly like value="{{item.countryId}}"

<select ng-model="selectedCountry">
   <option value="">Select Account</option>
  <option ng-repeat="item in chooseCountries" value="{{item.countryId}}">
    {{item.countryId}}-{{item.name}}
  </option>    
</select>

But above will not work for your case because you had countryId field is in number format, when option assign that value to value attribute it gets converted to string format. So on initial load you wouldn't see countryId gets binded to select box. comparison will occur like 2==="2" wouldn't be true, so select box would not select value, even if you provided in ng-model.

You can find the problem plunkr here

So for fixing it you need to convert that number value to string value by calling toString method over it like below

$scope.selectedCountry = $scope.chooseCountries[0].countryId.toString();

By doing above change select box does select provided countryId value in dropdown because of comparison occurs true "2"==="2"

That's why using ng-options would be better, which does preserve value datatype. Basically they worked without harm the datatypes of value.

http://plnkr.co/edit/evQJAKvMnl4btz4BZeuP?p=preview

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

4 Comments

can u plzz provide js fiddle?
@Mou check added plunkr
yes check and found u use ng-options instead of ng-reprater in your code. show me ng-reprater for dropdown.
@Mou do look at updated answer... where I explained why ng-repeat part doesn't work.. and do +1 if you can :p
2 
<select ng-options="country as country.countryId+  ' (' + country.name + ')' for country in chooseCountries  ng-model="selectedCountry "></select>

refer:https://docs.angularjs.org/api/ng/directive/ngOptions

Improve this answer

Comments

0

You should use ng-options as follows

<select ng-model="selectedCountry" ng-options="country.countryId as country.name for country in  chooseCountries"></select>
Improve this answer

2 Comments

tell me why we need to write field name this way country.countryId as country.name for country in chooseCountries why can't we write like country.countryId,country.name for country in chooseCountries ?
I don't think value,label works here. As per documentation following are options for using in ng-options if source is array. for array data sources: label for value in array, select as label for value in array, label group by group for value in array, label disable when disable for value in array, label group by group for value in array track by trackexpr, label disable when disable for value in array track by trackexpr, label for value in array | orderBy:orderexpr track by trackexpr (for including a filter with track by)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.