So ändern Sie den text im display des md-select-box, die bei Beibehaltung des Modells?

Ich bin mit Winkel material-Bibliothek Richtlinie md-select zu zeigen, eine Reihe von Länder-codes auf meinem Benutzer. Im Auswahl-Menü möchte ich zeigen, den Namen des Landes und Land-wählender code, aber sobald ein Land ausgewählt wurde, will ich nur die Anzeige, es ist der Vorwahlen in der select-box.

ex. bei der Auswahl India (+91) option, den text der select-box werden sollte +91.
Der code, den ich verwende, ist wie folgt.

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

Ich kann nicht herausfinden, wie Sie diese erreichen, weil dieser Weg führt zu den exakt gleichen text anzeigen, wie in der md-option tag auf Auswahl.
Gibt es eine Möglichkeit zum festlegen der Anzeige von text-Vorlage, basierend auf den ausgewählten Wert ohne änderung der ng-model verbindlich?

  • Es gibt keine strainght vorwärts-Methode, um so zu tun..Aber Sie können spielen, um md-on-close, die akzeptiert Ausdruck sein, der ausgewertet wird, wenn die select-geschlossen
InformationsquelleAutor Shasak | 2015-12-11
  1. 4

    Versuchen Sie dies:

    <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>
    • Funktioniert nicht, wenn das Objekt ausgewählt ist und Sie wieder gehen und auf Optionen anzeigen. Nächste mal, wenn Sie Ansicht-Optionen, wird es nicht angezeigt, für die bereits ausgewählten Artikel.
    InformationsquelleAutor Radu Nicoara
  2. 1

    Meine Lösung für md-select mit mehreren. Es ist eine schöne css-trick und funktioniert ziemlich gut.

    .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>
    InformationsquelleAutor user2544438
  3. 0

    Da eckig-material 1.0.8 gibt es md-selected-text, so könnten Sie versuchen:

    <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>
    • Ist es möglich, das wechseln zwischen den md-selected-text und die ausgewählten Optionen basiert auf, wie viele Optionen tatsächlich ausgewählt? Wenn Sie mehr als 3 Optionen ausgewählt, Sie zeigen die md-selected-text, wenn nicht Sie zeigen den gewählten Optionen.
    InformationsquelleAutor Daniel Larsson
Schreibe einen Kommentar