サーバーの応答に基づいた角度の動的フォームの作成

Question

サーバーの応答に基づいて動的フォームを作成しようとしています。たとえば、私は8つのボタンを持っており、クリックされると、それぞれのボタンは異なる入力タイプの異なるアンケートを生成するはずです。各カテゴリの質問はバックエンドから取得され、それぞれの質問にはラジオや選択などのタイプがあります。この情報に基づいて、特定の質問のフォームをどのようにユーザーのボタンに応じて生成できますかクリック私が考えたのは、どのカテゴリがクリックされたかによってng-hide/showを使うことでしたが、それは8つのカテゴリ（それぞれ8つ）に対して合計64の質問があるので、実際には悪い習慣になります。どんな助けもありがとう。ありがとう!!

応答は次のようである：

{ 
    "code": 200, 
    "data": { 
    "id": "598ca3dac405bc378fc21764", 
    "question_set_number": "QS1", 
    "questions": [ 
     { 
     "answers": [ 
      "Answer 1", 
      "Answer 2", 
      "Answer 3" 
     ], 
     "id": "59839d20c405bc411540a11d", 
     "question_number": "Q1", 
     "question_text": "Test question", 
     "type": "radio" 
     }, 
     { 
     "answers": [ 
      "Answer 1", 
      "Answer 2", 
      "Answer 3" 
     ], 
     "id": "59839d2dc405bc411540a11e", 
     "question_number": "Q2", 
     "question_text": "Test question", 
     "type": "check" 
     } 
    ] 
    }, 
    "message": "successful", 
    "status": "success" 
} 

Answer 1

あなたはフォーム入力ループスルーサーバーの入力に基づいて、動的にこの（実施例here）のようにそれらを表示することができます。

HTML

<!-- click a button to see a form --> 
<button data-ng-click="getQuestions('qs1')">Form 1</button> 
<button data-ng-click="getQuestions('qs2')">Form 2</button> 
<button data-ng-click="getQuestions('qs3')">Form 3</button> 

<form action=""> 
    <input data-ng-repeat="item in questions" type={{item.type}}> 
</form> 

コントローラ

app.controller('MainCtrl', ['$scope', function ($scope) { 

    $scope.questions = []; 

    $scope.getQuestions = function (category) { 

    //make service call based on category and return questions 
    //$scope.questions = result of service 

    //stubbed for example: 
    $scope.questions = [ 
     { 
     "answers": [ 
      "Answer 1", 
      "Answer 2", 
      "Answer 3" 
     ], 
     "id": "59839d20c405bc411540a11d", 
     "question_number": "Q1", 
     "question_text": "Test question", 
     "type": "radio" 
     }, 
     { 
     "answers": [ 
      "Answer 1", 
      "Answer 2", 
      "Answer 3" 
     ], 
     "id": "59839d2dc405bc411540a11e", 
     "question_number": "Q2", 
     "question_text": "Test question", 
     "type": "checkbox" //this was check, needed to be checkbox - either update service or manipulate it on your end 
     } 
    ]; 

    }; 


}]); 

行うだけでこれが唯一の1つの入力フィールドを書きながら、動的に入力を表示する概念を示しています。サービスがそれを送信した場合は、さらに追加します。複数の入力型を扱う場合は、このロジックをすべて処理する単純な動的入力ディレクティブを作成し、その型をディレクティブに単純に渡すことをお勧めします。私は作業例hereを持っていますが、これがコンセプトです。私はその論理についてもお手伝いします。