基於服務器響應在Angular中創建動態表單

Question

我正在嘗試基於服務器響應創建動態表單。例如，我有8個按鈕，點擊時每個按鈕都會生成不同輸入類型的問卷。每個類別的問題都是從後端抓取的，每個問題都有它的類型，可以是無線電，選擇等。基於這些信息，如何根據用戶的按鈕生成特定問題集的表單點擊。我想到的一件事是使用ng-hide/show取決於被點擊的類別，但這將是一個非常糟糕的做法，因爲這8個類別共有64個問題（每個8個）。任何幫助，將不勝感激。謝謝！！

的響應是這樣的：

{ 
    "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 
     } 
    ]; 

    }; 


}]); 

這樣做只是這顯示動態顯示的輸入，而只有寫入一個輸入場的概念。如果服務發送它，您可以添加更多內容。如果您要處理多種輸入類型，我建議您製作一個簡單的動態輸入指令來處理所有這些邏輯，然後簡單地將該類型傳遞給指令。我有一個工作示例here，但這就是這個概念。我也可以用這個邏輯來幫助你。