Question

我正在使用Angular材料库指令md-select向我的用户显示一堆国家/地区代码。在选择菜单中，我想显示国家/地区名称和国家/地区拨号代码，但是一旦选择了国家/地区，我只想在选择框中显示其拨号代码。

离。在选择India (+91)选项时，选择框的文本应为+91。我使用的代码如下。

<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>

我无法想象如何实现这一点，因为这种方式会导致与选择中的md-option标记完全相同的显示文本。有没有办法根据所选值指定显示文本模板而不更改ng-model绑定？

Answer 1

试试这个：

<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>

Answer 2

我的md-select解决方案有多个。这是一个很好的CSS技巧，效果很好。

.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>

Answer 3

由于角质材料1.0.8存在md-selected-text，所以你可以试试：

<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>

如何在维护模型的同时更改md-select框的显示文本？

3 个答案: