md-autocomplete / md-select support for ng-options

[hodeyp]

It looks as if both the md-autocomplete and md-select directives do not have the ability to work with key/name pairs in the way that ng-options allows?

I want to be able to set the key in ng-value, and value in the display label. is this currently possible?

[Frank3K]

+1!

This Plunker shows the differences between a native select (with support for ng-options select as label for value in array syntax) and md-select. Where the native select-element can have a label on both the select and its options, md-select currently only supports labels on the options.

Demo using v0.8.0-rc1-master-eda14e9. Change comments in source to change to master.

Note that in ng-options you can even apply a filter to the label in select as label for value in array, e.g. select as label | translate for value in array using the excellent angular-translate.

[jadrake75]

+1

This is EXACTLY what I needed except for this issue...

If your items for the options are objects, you may want one field for the option drop-down and another for value (the object likely). However upon selection, md-select is using the ng-model (which is an object in this case). There should be a label (preferred) you can set on md-select or use the "display" value from the selected md-option instead of the ng-model. Note this is not the same as placeholder

The plunker from Frank3K I think shows the issue. In case it is not clear (took me a second to see that it was the same issue) I created a more verbose example here:
http://plnkr.co/edit/ZVfNcK?p=preview

A syntax with label="name" might be a clean option

<md-select ng-model="selectedFilter" label="name" placeholder="Select a filter">
<md-option ng-value="opt" ng-repeat="opt in filters">{{ opt.name }}</md-option>
</md-select>

[gkalpak]

@Frank3K's and @jadrake75's comments are about a different issue than the originally reported one.
If I understand correctly, @hodeyp is asking for support for (key, value) in someObject (for mdAutocomplete/mdSelect), whereas @Frank3K and @jadrake75 are asking for a way to configure the display of the selected value (instead of displaying the selected object itself), which applies to mdSelect only (I believe).

I think these should be separate issues.

[alirezamirian]

+1

[mfdlr]

+1

Also ran into this issue, basically I am coming from plain angular <select> and now would like to use <md-select>.

In my current angular approach I store a selected item's "t.id" in scope var "mydata.types_id", but I would like the user to see not the id but the textual name "t.name" of the type:
<select name="types_id" data-ng-model="mydata.types_id" data-ng-options="t.id as t.name for t in types" required> </select>

[rschmukler]

Closing as duplicate of #1837. We agree it'd be great to have but you can achieve the same with ng-repeat for now. Regarding the display value, md-select now uses whatever you supply as the text value to the node.

[mikedobrin]

I just read the thread and it seems to me that the conversation was stolen by md-select.

What about md-autocomplete? I have a use case where the user should see some text value (for example a country name) and the model should contain a country code. With md-select it is easy. How can I achieve that with md-autocomplete?

[alexcriss]

+1 for md-autocomplete

[thomasbertet]

+1

[leex]

+1

[Greg-Shaw]

+1

[cuongpro2511]

+1

[jonpopp]

I am having major performance issues with ng-repeat inside md-select for very large drop downs. It takes a considerable amount of time to render the dom on first load (about 5 secs). Would having ng-options support in md-select improve performance? The parties object below is about a thousand objects.

<md-select multiple ng-model="myPartyIds" ng-model-options="{trackBy: '$value.partyId'}"> <md-option ng-value="party" ng-repeat="party in ::parties | orderBy:'party.shortDisplayName'">{{ party.shortDisplayName }}</md-option> </md-select>