より良い方法でFORM値を保存してロード

Question

私はページにドロップダウン選択をしています。

コードでは、JavaScript側

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

のように見えます。

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

ただし、データベースのフィールドの値はINTEGER型です。私はあまりにも多くのハードコード手続きせずにページにデータベースから性別値を読み込むことができますどのように男性

のための女性のための

0、1。

私はAPIから性別値をロードするロードページ

• についてその

  のような愚かな方法を考えることができますので。

• は、保存するためのジェンダードロップダウンリストの選択値

が

• 節約のためのAPIへのセンドPUT要求は
を変更
• 男女のドロップダウンリストの選択値を抽出を変更する設定しました

うわー、コードを実装するロジックがたくさんあるはずです。

Angular.jsや任意のjavascriptライブラリでこれを達成してコンバージョンを処理するうまい方法はありませんか。あなたの唯一の懸念は、あなただけで変更する必要があるUI選択の繰り返しのid値と一致する場合

はあなたに

Answer 1

ありがとう：

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

へ：

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

あなたは現在、このモデル全体を選択した値として使用したいと言っているだけです。 "options.id as option"と言っておくと、リピートで使用するオブジェクト全体が表示されますが、何かが選択されたときに、idを選択値として設定し、値を設定するための比較として使用します。

クイック例はhttps://plnkr.co/edit/G8FHfauHd2auSYdRUlDB?p=preview