md-select: Make the display of the selected value configurable

[Frank3K]

Seperated this issue from #1563 as suggested by @gkalpak (#1563 (comment))

Currently there is no way to configure the display of the selected value in an md-select.

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: can you update this issue with your comment?

[rryter]

@Frank3K: what about this? Check this Plunker

All you need to do is add one line to the md-select.
<md-select-label>{{ drawSettings.lineWidth + "px"}}</md-select-label>

Or do you mean that there is no option on the directive to do this?

[Frank3K]

Cool solution and it is sufficient for my use case. I did not think of this, I indeed expected some option on the directive.

What if the options are more irregular, e.g. 1px, 2px, 1em, 2em, 1vh, 2vh? Then adding a fixed suffix would not suffice anymore.

[rryter]

You could easily do something like this:
<md-select-label>{{ lineWidths[drawSettings.lineWidth - 1].label}}</md-select-label>

Of course that's not the exact way you want to do it, since it is just a coincidence that this example works with "array indexes - 1" to access the objects. But it should give you an idea of how that could be done.

So i guess for now this issue can be closed?

[Frank3K]

Although your solutions do work, they're both coincidences that they work. For now, I'll leave this issue open in search of generic solution for all cases.

[gkalpak]

In any case this is a workaround and a more proper solution should be implemeted (imo).
It would be nice is mdSelect could somehow be more tightly bound to select/ngOptions and just affect the visual aspect, because select/ngOptions habe plenty of nice features/capabilities and itis a pity to have to sacrifice them for better looks :)

[jadrake75]

(as requested here was my previous comment)

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>

UPDATE: I can confirm that I am able to use the <md-select-label> inside of the <md-select> with a {{ }} expression on the model object like so:

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

If this is the "way proposed going forward" it should be properly documented (I realize we are still rc1 + latest build here and appreciate the efforts to assist)

[Frank3K]

@gkalpak: I agree and like your suggestion.
@jadrake75: For your case this works. I could do the same: setting ng-value to an object rather than an object property, but then I would need to update all my references for that model. This isn't a very big problem, but a proper solution would be better; especially since ng-value and label-options can already be set properly.

[jadrake75]

@Frank3K - interestingly enough I updated my hobby application at home to replace the selects/ng-options and sure enough the current situation of using the md-select-label doesn't work for me. In this case, since I use the selected value to build a query for search, the model value is the object's "id" not the object itself. Which means I either need to filter through all of the objects to find the matching id to get the 'name' to display, or I need to store in my selection model the object and then replace this with the object's id prior to creating the serialized query string. yuck on all occasions.

My temporary workaround is to set the md-select-label to the expression {{ getName('countries', selected.countryRef ) }}

and then I had to implement the following (for each collection of course) - double yuck (yes I can use something like underscore to reduce the complexity here - just haven't added it to the project yet)

$scope.getName = function(collection,id) {
var name = '';
if( id && id > 0 ) {
switch(collection) {
case 'countries':
var len = $scope.countries.length;
for(var i = 0; i < len; i++ ) {
if( $scope.countries[i].id === +id ) {
name = $scope.countries[i].name;
break;
}
}
break;
}
}
return name;
}

UPDATE In case anyone is thinking about taking this approach, the getName() it is evaluated way too many times. Instead, I created a new variable "selectedLabels.countryRef" and then add a watch on "selected.countryRef", and only if changes do I attempt to determine the label.

[rschmukler]

We are still debating whether we want to support the ng-options based syntax. Out of curiosity, what are everyone's thoughts on using the text (label) of the md-option that is selected? This seems like it'd be the most intuitive.

[jadrake75]

Personally in all of the occasions I can think I will need (there are about 20+) the value displayed in the md-select as selected would match the text in the md-option label.

Seems like a practical approach to me. If people needed something "custom" they could use the md-select-label to override it.

[Frank3K]

... what are everyone's thoughts on using the text (label) of the md-option that is selected?

That would work for my cases too. Besides implementation-specific details, wouldn't this have the same end effect (and possibilities) as a regular select with ng-options?