基于服务器响应在Angular中创建动态表单
我正在尝试基于服务器响应创建动态表单。例如,我有8个按钮,点击时每个按钮都会生成不同输入类型的问卷。每个类别的问题都是从后端抓取的,每个问题都有它的类型,可以是无线电,选择等。基于这些信息,如何根据用户的按钮生成特定问题集的表单点击。我想到的一件事是使用ng-hide/show取决于被点击的类别,但这将是一个非常糟糕的做法,因为这8个类别共有64个问题(每个8个)。任何帮助,将不胜感激。谢谢!!基于服务器响应在Angular中创建动态表单
的响应是这样的:
{
"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"
}
可以通过基于所述服务器输入形式输入环和动态显示它们是这样的(工作实施例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,但这就是这个概念。我也可以用这个逻辑来帮助你。
非常感谢! :)我现在可以用单一输入类型生成问题,但我只是想知道这对于多种输入类型是不是也适用?当你从服务器绑定类型时。为什么我需要一个指令?再次感谢!! – BleachedAxe
我想你不需要如果你保持这个简单。我为我的项目使用了一个指令,因为我有textareas,文本,日期等等,有些是用值自动填充的。它变得非常大,所以我有理由把它分解成一个指令。但没有必要! – kauffee000
有一件事,因为这些输入类型是在运行时生成的,您如何将它们分配给ng-model以提交到后端?每次问题或答案都会有所不同,并可能代表不同的对象。你如何处理所有这些方法?谢谢! – BleachedAxe
我可以为你做一个例子,但你可以循环输入,并根据服务器的响应动态分配它们的类型。如果你认为这是你需要的,我有一个现有的例子[这里](https://github.com/kauffmanes/acoma-data-app/blob/master/public/newFindForm/new-find-form.html)。 – kauffee000
您的回复与我的相似吗?我只是编辑我的帖子,如果你可以看看。谢谢!! – BleachedAxe
是的,它非常相似。我正在为你准备一个垃圾箱。这是8种形式中的1种的反应吗?每按一下按钮点击一个新的服务电话的问题? – kauffee000