AngularJS - How to preselect value in select?

Question

i have array of available select items:

// Default available date formats
        $scope.dateformats = [
            {
                code: 'YY.MM.DD',
                name: 'YY.MM.DD'
            },
            {
                code: 'DD.MM.YY',
                name: 'DD.MM.YY'
            }
        ];

And I'm trying to default preselected value like this:

$scope.actualDateformat = $scope.dateformats[0].code;

<select ng-options="dateformat.name for dateformat in dateformats" ng-model="actualDateformat" ng-change="changeDateFormat(dateformat)">
   <option style="display:none" value="">{{actualDateformat}}</option>
</select>

Problem is, that "preselected" value appears in list as first option tag>

<option style="display:none" value="">{{actualDateformat}}</option>

After select of any from two remaining dynamically added items is text in first option appended with text (and value) of the selected item.

How can in solve it please?

I would like to have result like this:

<select>
  <option value="YY.MM.DD">YY.MM.DD</option>
  <option value="DD.MM.YY" selected>DD.MM.YY</option>
</select>

Thanks for any help.

Have you tried docs.angularjs.org/api/ng/directive/ngSelected — Vijay R.
– Vijay R., Commented Oct 8, 2014 at 8:29

Cem Özer · Accepted Answer · 2014-10-08 08:21:04Z

2

Here is FIDDLE

Your problem is you are selecting entire object not code field of that object.

dateformat.name for dateformat in dateFormats
    label  : dateformat.name 
    object : dateformat

dateformat.code as dateformat.name for dateformat in dateformats
    label  : dateformat.name
    object : dateformat.code

Also I don't understand the need of option withdisplay:none.

You can select dateformat.code like this.

<select ng-options="dateformat.code as dateformat.name for dateformat in dateformats" ng-model="actualDateformat" ng-change="changeDateFormat(dateformat)">
</select>

answered Oct 8, 2014 at 8:21

Cem Özer

1,28312 silver badges19 bronze badges

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

1 Comment

Cem Özer Over a year ago

So? When you are writing here i was busy with jsfiddle. And i didn't want to waste my time just for another answer being showed up. I think you are aware of i didn't copy your answer.

Cerbrus · Accepted Answer · 2014-10-08 08:13:52Z

1

Change:

<select ng-options="dateformat.name for dateformat in dateformats"
        ng-model="actualDateformat" ng-change="changeDateFormat(dateformat)">
    <option style="display:none" value="">{{actualDateformat}}</option>
</select>

To:

<select ng-options="dateformat.code as dateformat.name for dateformat in dateformats"
        ng-model="actualDateformat" ng-change="changeDateFormat(dateformat)">
</select>

This way, the select should recognize the item where the dateformat.code matches actualDateformat.

This blog has some good examples about ng-options.

To give you an example:

Assume:

$scope.array = [
    { key: 1, value: 'Display text 1!' },
    { key: 2, value: 'Display text 2!' },
    { key: 3, value: 'Display text 3!' }
]

Then, using the following options:

<select ng-options="item.key as item.value for item in array" ng-model="result">

Would result in:

<select ...>
    <option value="1">Display text 1!</option>
    <option value="2">Display text 2!</option>
    <option value="3">Display text 3!</option>
</select>

$scope.result would be set to these option elements' value attribute.
If you initialize $scope.result as 2, "Display text 2!" should be selected.

edited Oct 8, 2014 at 8:13

answered Oct 8, 2014 at 8:08

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

1 Comment

Wiz Over a year ago

I like this answer because it gives a good blog post about various options as well

Collectives™ on Stack Overflow

AngularJS - How to preselect value in select?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related