md-select: Make the display of the selected value configurable #1601
Comments
@Frank3K: what about this? Check this Plunker All you need to do is add one line to the md-select. Or do you mean that there is no option on the directive to do this? |
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. |
You could easily do something like this: 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? |
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. |
In any case this is a workaround and a more proper solution should be implemeted (imo). |
(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: A syntax with label="name" might be a clean option <md-select ng-model="selectedFilter" label="name" placeholder="Select a filter"> 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"> 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) |
@gkalpak: I agree and like your suggestion. |
@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) { 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. |
We are still debating whether we want to support the |
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. |
That would work for my cases too. Besides implementation-specific details, wouldn't this have the same end effect (and possibilities) as a regular |
How to get selected value of md-select? |
@Muneem : What do you mean by "selected value" of select? |
I mean i have implemented md-select. Now user selects some option from this select. Now how can i get value which user has selected? |
@Muneem : https://material.angularjs.org/latest/demo/select I can see ng-model binded to md-select and that is what will give you the value selected. |
What if the md-select has 1000 items and a limitTo: 5? The initial list would ranging from 1-5. |
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) andmd-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?
The text was updated successfully, but these errors were encountered: