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 Beniwal, Jul 23 '13 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, Jul 23 '13 at 16:55

score 21 · Answer 1 · edited May 23 '17 at 11:54

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

score 10 · Answer 2 · answered Jul 23 '13 at 15:55

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 '13 at 15:55

Sharondio

2,605
13
16

3

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. – JB Nizet Jul 23 '13 at 15:59
Good to know. I always use the second method myself, but figured an identical object would work. – Sharondio Jul 23 '13 at 16:10
Another option is to use the `select as label for value in array` to bind the model to a property on value – noj Jul 23 '13 at 16:20
Sharondio, Before I get to that point I need to understand how I can set custom values in "values" attribute of the – runtimeZero Jul 23 '13 at 16:57
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: http://plnkr.co/edit/3riXsi?p=preview – Sharondio Jul 23 '13 at 20:26

score 8 · Answer 3 · answered Apr 04 '14 at 05:50

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 04 '14 at 05:50

Webfreaks

113
3
7

score 7 · Answer 4 · answered Feb 02 '15 at 10:02

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 02 '15 at 10:02

Lokesh Kumar

231
3
6

score 3 · Answer 5 · answered Nov 24 '15 at 23:50

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.

score 3 · Answer 6 · answered Feb 18 '16 at 12:03

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 '16 at 12:03

Amulya Kashyap

2,333
17
25

score 2 · Answer 7 · edited Mar 06 '14 at 23:30

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 06 '14 at 23:30

Math

3,334
4
36
51

answered Mar 06 '14 at 23:06

Varun Raghunandan

21
1

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. – Natus Drew Oct 12 '14 at 06:21

score 2 · Answer 8 · edited Jan 22 '15 at 14:22

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 '15 at 14:22

Zac

4,510
3
36
44

answered Jan 22 '15 at 14:14

satish kumar

31
2

score -3 · Answer 9 · answered Oct 15 '14 at 09:48

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>

score -12 · Answer 10 · answered Aug 22 '13 at 13:44

-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 '13 at 13:44

Tushar Sharma

347
1
3
11

Setting default value in select drop-down using Angularjs

10 Answers10

Linked