Material: md-select default value

[ilanbiala]

Is there currently a way to set a default value for md-select other than setting the ng-model of the field? Is that the intended way?

[epelc]

@ilanbiala The regular html5 select/option has a selected attribute. I'm not sure if it works with md-select but you can also set value="" on one of your options as a hack if the first method doesnt work.

http://www.w3schools.com/tags/att_option_selected.asp

[rschmukler]

You should be able to do it with either ng-model on the select itself, or by setting selected on one of the md-options. If this isn't working, let me know and we will turn this into a bug.

[adsamcik]

It shows the default option but it doesn't set the value, so when I retrieve it with $scope.model, the value is undefined, like it would have never been set to any value.

[rschmukler]

@adsamcik As per this demo it appears to be working.

[rschmukler]

Closing as I can't reproduce it (see demo above). If it persists, please open a new issue with a demo.

[prasad47]

+1 @ demo

[langhoangal]

Just note for who go here, in the demo:

• The second way (use selected="selected") won't work with Angular Material release 1.0.0.
• The first one is OK.

[vcyang]

If u wanna set the first option as the default value while using ng-repeat in md-option, maybe you can use ng-selected="$first" as below:

[Berg-it]

        <md-select ng-model="vmIdPage.number">
                 <md-option ng-value="mod" ng-repeat="mod in vmIdPage.initObject.listeModaliteMisePlace" ng-selected="{{ mod.id === vmIdPage.number.id ? 'true' : 'false' }}">
                    {{mod.libelle}}
                 </md-option>
        </md-select> 

[anthony-zingbox]

@Berg-it sadly selected=false is invalid according to the HTML spec - the following works though:

<md-select ng-model="vmIdPage.number"> <md-option ng-value="mod" ng-repeat="mod in vmIdPage.initObject.listeModaliteMisePlace" ng-attr-selected="{{ (mod.id === vmIdPage.number.id) }}"> {{mod.libelle}} </md-option> </md-select>

[Muneem]

is this issue resolved?

[Berg-it]

For me I solved this usnig ng-selected:

            <md-select ng-model="vmIdPage.finalObject.categoriePersonnel" style="min-width: 200px;">
                <md-option ng-value="opt" ng-repeat="opt in vmIdPage.initObject.listeCategoriePersonnel track by opt.id" ng-selected="{{ opt.id === vmIdPage.finalObject.categoriePersonnel.id ? 'true' : 'false' }}">{{opt.libelle}}</md-option>
            </md-select>

[MMHossaini]

@Berg-it if you use ng-change on the md-select with your approach it gets called when it shouldn't. Are you experiencing that also.

[aseem2625]

@MurWade
Yes, it happens for me. For @MurWade, it worked because he is not using ng-change.

[Seiifer]

Is there a way to set the default value, only when there is only one <md-option> ?
Meaning we are iterating on a dynamic list using ng-repeat.

[gullocean]

@ilanbiala
How are you? I have one question for you. I used the md-select, but when I added the ng-selected attritbute in md-options tag, it is firing the automatically ng-change event even though I didn't select anything.. In a word, when page is loaded, the ng-change is firing by ng-selected attribute.. so is there any way to prevent the auto change event when page is loaded? I just want to get the change event when selectbox is change..

[dsinkey]

I'm getting the same thing. I have ng-change set on the md-select. If I use ng-repeat and ng-selected the ng-change is called multiple times and the value selected is the last value in the ng-repeat.

            <md-input-container flex="50">
                <label>Site</label>
                <md-select ng-model="data.site" ng-change="siteSelectChanged(data.site)">
                    <md-option ng-repeat="site in sites" value="{{site}}" select="data.selectedSite">
                        {{site}}
                    </md-option>
                </md-select>
            </md-input-container>

[bfsmithATL]

Just got this working and felt compelled to drop you all out there a quick note, rather than be a persistent lurker, lol. I was experiencing the same behavior everyone was reporting until I refactored a bit. @dsinkey, I think one issue you are experiencing may be the result of having defined ng-model="data.site" on both your md-select and your md-option. You only need to define it on the md-select directive.

Regarding the setting a default value for an md-option which is derived via iterating with ng-repeat, I found that I had to use the ng-selected directive on the md-option directive and evaluate the repeated option against what I set in ng-model AND use interpolation for the evaluation, which I found bizarre. See this fiddle demo which I forked from @rschmukler from his post on March 23, 2015.

The list will default to "List Item 2" since ng-model (the selectedEntity variable) is initially set to {id: 2, description: 'List item 2'};

You will also notice that ng-change is raised at least once, upon the setting of the default value. This is evident by a date/time string rendered in green INSTEAD of the string default "Initial Load" when the controller is loaded.

Hope this helps some of you out there on the interwebz. :-)