Javascript 从AngularJS中的JSON生成HTML代码

我试图从存储的JSON文件动态生成HTML代码。JSON文件格式：

{
  "fields": [
    {
        "name": "service type",
        "type": "text|radio|checkbox|date",
        "placeholder": "Service Type",
        "value": "",
        "checked": "true"
    },
     {
        "name": "service type",
        "type": "text|radio|checkbox|date",
        "placeholder": "Service Type"
     }
  ]
}

 <input type="text" name="service type" value="">

但是，DOM元素的类型会根据JSON文件的不同而变化。例如，如果type:text，则必须生成：

 <input type="text" name="service type" value="">

我用的是AngularJS。如何实现此功能？

您可以自己使用或设置自定义模板

 <input type="text" name="service type" value="">

例如：

 <input type="text" name="service type" value="">

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.fields=[{
“id”：1，
“名称”：“服务类型文本”，
“类型”：“文本”，
“占位符”：“服务类型”，
“值”：”
}, {
“id”：2，
“名称”：“服务类型无线电”，
“类型”：“收音机”，
“选择”：[{
“id”：1，
“已选择”：true，
“名称”：“选项1”
}, {
“id”：2，
“选定”：false，
“名称”：“选项2”
}]
}, {
“id”：3，
“名称”：“服务类型复选框”，
“类型”：“复选框”，
“选择”：[{
“id”：1，
“已选择”：true，
“名称”：“选项1”
}, {
“id”：2，
“选定”：false，
“名称”：“选项2”
}, {
"id":3,，
“已选择”：true，
“名称”：“选项3”
}]
}];
$scope.updateRadioChoices=函数（字段，选项）{
$.each（field.choices，function（i，val）{
如果（val.id！=choice.id）val.selected=false；
});
}
}

文本字段

无线电场

{{choice.name}
复选框字段

{{choice.name}
错误。无效的HTML元素类型。
字段-输出

{{fields}}

如果您只是尝试创建表单，则允许您从json呈现模板。

类型值似乎是多个元素类型。可能重复显示更多代码或创建小提琴？这是否支持我问题的编辑版本？如果不是的话，你能告诉我出了什么问题吗？请看我的更新答案，我包括了一个演示。如果你有任何进一步的问题，请毫不犹豫地提出。

 <input type="text" name="service type" value="">