CODEWITHSUNDEEP
javascriptangularjsangular-material
Shasak
Shasak

Reputation: 820

How to change the display text of md-select box while maintaining the model?

I am using Angular material library directive md-select to show a bunch of country codes to my users. In the selection menu i want to show the country name and country dialing code but once a country is selected i want to display only it's dialing code in the select box.

ex. on choosing India (+91) option the text of select box should be +91. The code i am using is as follows.

<md-select ng-model="ctrl.selectedCountry" ng-model-options="{trackBy: '$value.code && $value.name && $value.prefix'}">
        <md-option ng-repeat="country in ctrl.countries" ng-value= "{{ country }}" >
                    {{ country.name }} ({{ country.prefix }})
        </md-option>
</md-select>

I can't figure how to achieve this because this way leads to the exact same display text as in the md-option tag on selection. Is there a way to specify the display text template based on the selected value without changing the ng-model binding?

Upvotes: 2

Views: 8304

Answers (3)

user2544438
user2544438

Reputation: 11

My solution for md-select with multiple. It's a nice css trick and works pretty well.

.option-hack {
  display: none;
}

md-option .option-hack {
  display: inline;
}

<md-input-container class="md-block">
  <label>Some Label</label>
  <md-select multiple
             ng-model="ctrl.array">
    <md-option ng-value="item" ng-repeat="item in ctrl.items" ng-selected="item.isOn">
      Always shown
      <span class="option-hack">Hidden on main</span>
    </md-option>
  </md-select>
</md-input-container>

Upvotes: 1

Daniel Larsson
Daniel Larsson

Reputation: 21

Since angular-material 1.0.8 there's md-selected-text, so you could try:

<md-select md-selected-text="ctrl.selectedCountry.prefix" ng-model="ctrl.selectedCountry" ng-model-options="{trackBy: '$value.code && $value.name && $value.prefix'}">
  <md-option ng-repeat="country in ctrl.countries" ng-value= "{{ country }}" >
    {{ country.name }} ({{ country.prefix }})
  </md-option>
</md-select>

Upvotes: 1

Radu Nicoara
Radu Nicoara

Reputation: 131

Try this:

<md-select ng-model="ctrl.selectedCountry" ng-model-options="{trackBy: '$value.code && $value.name && $value.prefix'}">
        <md-option ng-repeat="country in ctrl.countries" ng-value= "{{ country }}" >
                    {{ctrl.selectedCountry.prefix === country.prefix ? country.code : (country.name + ' (' + country.prefix + ')')}}
        </md-option>
</md-select>

Upvotes: 4

Related Questions