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?

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?

• javascript
• angularjs
• angular-material

• There is no strainght forward method to do so..But you can play around md-on-close which accepts Expression to be evaluated when the select is closed – Rayon Commented Dec 11, 2015 at 11:56

3 Answers 3

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>

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>

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>