Setting default value in select drop-down using Angularjs

Question

I have an object as below. I have to display this as a drop-down:

var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]

In my controller I have a variable that carries a value. This value decided which of the above three items in the array will be selected by default in the drop-down:

 $scope.object.setDefault = 600;

When I create a drop-down form item as below:

<select ng-model="object.setDefault" ng-options="r.name for r in list">

I face two problems:

the list is generated as

<option value="0">abc</option>
<option value="1">def</option>
<option value="2">xyz</option>

instead of

<option value="4">abc</option>
<option value="600">def</option>
<option value="200">xyz</option>

No option gets selected by default even though i have ng-model="object.setDefault"

In angular the value attribute in options in index of option inside inside the select element — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 23, 2013 at 15:58
Ajay..you seem to be right about that. So now the question is, how do I give it a custom value — runtimeZero
– runtimeZero, Commented Jul 23, 2013 at 16:55

Community · Accepted Answer · 2017-05-23 11:54:57Z

21

Problem 1:

The generated HTML you're getting is normal. Apparently it's a feature of Angular to be able to use any kind of object as value for a select. Angular does the mapping between the HTML option-value and the value in the ng-model. Also see Umur's comment in this question: How do I set the value property in AngularJS' ng-options?

Problem 2:

Make sure you're using the following ng-options:

<select ng-model="object.item" ng-options="item.id as item.name for item in list" />

And put this in your controller to select a default value:

object.item = 4

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jan 3, 2014 at 10:35

Stephanie

5376 silver badges14 bronze badges

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

Comments

Sharondio · Accepted Answer · 2013-07-23 15:55:56Z

10

When you use ng-options to populate a select list, it uses the entire object as the selected value, not just the single value you see in the select list. So in your case, you'd need to set

$scope.object.setDefault = {
    id:600,
    name:"def"
};

or

$scope.object.setDefault = $scope.selectItems[1];

I also recommend just outputting the value of $scope.object.setDefault in your template to see what I'm talking about getting selected.

<pre>{{object.setDefault}}</pre>

answered Jul 23, 2013 at 15:55

Sharondio

2,61415 silver badges16 bronze badges

5 Comments

JB Nizet Over a year ago

Only the second one would work. select uses === to compare values. If you set another object with the same attributes, it will be considered different.

Sharondio Over a year ago

Good to know. I always use the second method myself, but figured an identical object would work.

noj Over a year ago

Another option is to use the select as label for value in array to bind the model to a property on value

runtimeZero Over a year ago

Sharondio, Before I get to that point I need to understand how I can set custom values in "values" attribute of the <OPTION> tag ?

Sharondio Over a year ago

You can't. ng-options creates the index. If you use jonnyynnoj's suggestion, it will give you the id as the selected value, but the select will still show the array index as the value. If you absolutely need the option value to be your id, you could use ng-repeat on the option element and populate it anyway you want like this: plnkr.co/edit/3riXsi?p=preview

Webfreaks · Accepted Answer · 2014-04-04 05:50:46Z

8

In View

<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>

JS:

In side controller

 $scope.boxModel = 600;

answered Apr 4, 2014 at 5:50

Webfreaks

1133 silver badges7 bronze badges

Comments

Lokesh Kumar · Accepted Answer · 2015-02-02 10:02:57Z

7

You can do it with following code(track by),

<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>

answered Feb 2, 2015 at 10:02

Lokesh Kumar

2513 silver badges6 bronze badges

Comments

user007 · Accepted Answer · 2015-11-24 23:50:30Z

3

This is an old question and you might have got the answer already.

My plnkr explains on my approach to accomplish selecting a default dropdown value. Basically, I have a service which would return the dropdown values [hard coded to test]. I was not able to select the value by default and almost spend a day and finally figured out that I should have set $scope.proofGroupId = "47"; instead of $scope.proofGroupId = 47; in the script.js file. It was my bad and I did not notice that I was setting an integer 47 instead of the string "47". I retained the plnkr as it is just in case if some one would like to see. Hopefully, this would help some one.

answered Nov 24, 2015 at 23:50

user007

1,7983 gold badges26 silver badges61 bronze badges

Comments

Amulya Kashyap · Accepted Answer · 2016-02-18 12:03:22Z

3

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>

This would get you desired result Dude :) Cheers

answered Feb 18, 2016 at 12:03

Amulya Kashyap

2,3731 gold badge20 silver badges26 bronze badges

Comments

Math · Accepted Answer · 2014-03-06 23:30:01Z

2

Some of the scenarios, object.item would not be loaded or will be undefined.

Use ng-init

<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"

edited Mar 6, 2014 at 23:30

Math

3,3904 gold badges41 silver badges53 bronze badges

answered Mar 6, 2014 at 23:06

Varun Raghunandan

211 bronze badge

1 Comment

Natus Drew Over a year ago

ng-options is enumerating my list 0..10 and so on irregardless of the actual id value. Nevermind. It's just rendering like that. The actual values are being passed in the form submit.

Zac · Accepted Answer · 2015-01-22 14:22:32Z

2

$scope.item = {
    "id": "3",
    "name": "ALL",
};

$scope.CategoryLst = [
    { id: '1', name: 'MD' },
    { id: '2', name: 'CRNA' },
    { id: '3', name: 'ALL' }];

<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>

edited Jan 22, 2015 at 14:22

Zac

4,7553 gold badges39 silver badges46 bronze badges

answered Jan 22, 2015 at 14:14

satish kumar

312 bronze badges

Comments

vinodhkumar · Accepted Answer · 2014-10-15 09:48:05Z

-3

we should use name value pair binding values into dropdown.see the code for more details

function myCtrl($scope) {
     $scope.statusTaskList = [
        { name: 'Open', value: '1' },
        { name: 'In Progress', value: '2' },
        { name: 'Complete', value: '3' },
        { name: 'Deleted', value: '4' },
    ];
    $scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open 
}

<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>

answered Oct 15, 2014 at 9:48

vinodhkumar

11 bronze badge

Comments

Tushar Sharma · Accepted Answer · 2013-08-22 13:44:36Z

-12

I could help you out with the html:

<option value="">abc</option>

instead of

<option value="4">abc</option>

to set abc as the default value.

answered Aug 22, 2013 at 13:44

Tushar Sharma

3471 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Setting default value in select drop-down using Angularjs

10 Answers 10

Comments

5 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

5 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related