基于服务器响应在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，但这就是这个概念。我也可以用这个逻辑来帮助你。