2016-06-20 9 views
1

Ich habe Dropdown-Auswahl auf der Seite.Speichern und Laden der FORM-Wert in einer besseren Praxis

Der Code sieht aus wie

<td> 
    <ui-select ng-model="user_profile.gender" required="true"> 
    <ui-select-match > {{$select.selected.name}} </ui-select-match> 
    <ui-select-choices repeat="option in selectOptions.gender | propsFilter: {name: $select.search} "> 
    <div ng-bind-html="option.name | highlight: $select.search"></div> 
    </ui-select-choices> 
    </ui-select> 
</td> 

Javascript Seite.

var selectOptions = { 
    gender: [{ 
     id: 0, 
     name: "女" 
    }, { 
     id: 1, 
     name: "男" 
    }], 
    .. 
} 

Der Wert für das Feld in der Datenbank ist jedoch ein INTEGER-Typ.

0 für Frauen, 1 für Männer

Wie ich das Geschlecht Wert aus der Datenbank auf der Seite, ohne zu viele Festcodeprozeduren laden konnte.

Weil ich eine dumme Art und Weise denken Sie an, wie die

Zum Laden Seite

  • Belastung der geschlechtsspezifische Wert von API.
  • den ausgewählten Wert der Gender-Drop-Down-Liste gesetzt

Zum Speichern von Änderungen

  • den ausgewählten Wert der Liste Geschlecht Dropdown extrahieren
  • Sende PUT-Anfrage an die API für das Speichern von Änderungen

Wow, sollte es viel Logik der Implementierung des Codes beinhalten.

Gibt es eine elegante Möglichkeit, dies auf Angular.js oder einer Javascript-Bibliothek zu erreichen, um die Konvertierungen zu handhaben.

Danke

+0

sein Darf ich zu dumm bin, denke ich, die gleiche Art und Weise wie du :-) –

+0

ich denke, die ähnliche Arbeitsablauf ist ein Muss, aber gibt es eine handliche lib kann uns helfen, schreibe weniger Code. wie "ngResource" sparen Sie viel Zeit, um viel Code für das Aushandeln mit Webserver zu schreiben :( – newBike

Antwort

0

Wenn Ihre einzige Sorge ist, in der Wiederholung der den ID-Wert übereinstimmen ui-select dann nur ändern müssen Sie:

<ui-select-choices repeat="option in selectOptions.gender | propsFilter: {name: $select.search} "> 

zu:

<ui-select-choices repeat="option.id as option in selectOptions.gender | propsFilter: {name: $select.search} "> 

Grund ist, dass Sie gerade sagen, ich möchte das gesamte Modell als ausgewählten Wert verwenden. Indem ich "options.id als Option" sage, sage ich, dass ich Ihnen das ganze Objekt geben werde, das in der Wiederholung verwendet werden soll, aber wenn etwas ausgewählt ist, werde ich die ID als ausgewählten Wert einstellen und diese als Vergleich zum Setzen des Wertes verwenden.

Schnell Beispiel ist bei https://plnkr.co/edit/G8FHfauHd2auSYdRUlDB?p=preview

Verwandte Themen