2017-04-07 10 views
0

ルールと呼ばれるモデルの編集フォームを持つ角度アプリがあります。これには名前、説明などのフィールドがあり、すべてテキスト入力です。次に、Ruleモデルとの関係にあるRuleTypeモデルがあります。 Ruleを編集するときにRuleTypesのドロップダウンメニューの形式でこれを実装したいと思います。これらのRuleTypeは、AJAX経由でデータベースからロードされます(したがって、Angularアプリケーションでハードコードされているわけではありません)。角度関係でのハンドル関係

現在、APIから返されたルールモデルJSONは、次のようになります。私は、ドロップダウンのためのデータをフェッチ以下れるについて考えている二つの方法

{ 
    "name": "TestRule", 
    "description": "This is a rule", 
    "ruleTypeId": 2, 
    "ruleType": { 
     "id": 2, 
     "name": "Instant", 
     "key": "INSTANT" 
    } 
} 

を必要に応じてこれを変更することができます。

  • すべてRuleTypesを取得するためにAPI呼び出しを実装します。次に、ドロップダウンにこれをマップとルールのモデル
    • PROSの「ruleTypeId」フィールドオフに基づいて該当するいずれかを選択します。APIデザイン
    • CONSに収まる一般的なアプローチは、次のとおりです。余分なHTTPリクエストを必要とし、選択された項目を処理するための手動ロジック
  • ルールをフェッチするAPI呼び出しの一部として、すべてのRuleTypeのリストを返します。
    • PROS:唯一のAPIコール
    • CONSが必要です:ルールを取得するためのAPI呼び出しに余分なデータを追加します。このデータをフェッチし、角中のモデル/ビューにマッピングするためのベストプラクティス/クリーンなアプローチは何ですか?RESTのAPIの設計とよく

に適合しませんか

答えて

0

コントローラの別のAjaxリクエストを介してRuleTypesをロードすることで、この問題を解決することができました。これは、ngOptionsディレクティブを使用してドロップダウンに入力するために使用されます。 ngModelディレクティブは、ruleTypeIdに基づいて正しい項目を選択します。これは、Ruleモデルが保存されるときにAjaxを使用して保存されます。

この方法では、Ajaxを介してドロップダウン・データをロードする以外に、手動による介入は必要ありません。