在AngularJS中从JSON生成HTML代码

Question

I am attempting to generate HTML code dynamically from a stored JSON file. 我试图从存储的JSON文件动态生成HTML代码。 The JSON file format: 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"
     }
  ]
}

However the type of the DOM element changes according to the JSON file. 但是，DOM元素的类型根据JSON文件而更改。 For example, if type: text, then this has to be generated: 例如，如果键入：text，则必须生成：

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

I'm using AngularJS. 我正在使用AngularJS。 How can I implement this? 我该如何实现呢？

Answer 1

You can use angularjs-dynamic-form or setup a custom template by yourself. 您可以使用angularjs-dynamic-form或自己设置自定义模板。

For instance: 例如：

 var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.fields = [{ "id": 1, "name": "service type text", "type": "text", "placeholder": "Service Type", "value": "" }, { "id": 2, "name": "service type radio", "type": "radio", "choices": [{ 'id': 1, 'selected': true, 'name': "Choice 1" }, { 'id': 2, 'selected': false, 'name': "Choice 2" }] }, { "id": 3, "name": "service type checkbox", "type": "checkbox", "choices": [{ 'id': 1, 'selected': true, 'name': "Choice 1" }, { 'id': 2, 'selected': false, 'name': "Choice 2" }, { 'id': 3, 'selected': true, 'name': "Choice 3" }] }]; $scope.updateRadioChoices = function(field, choice) { $.each(field.choices, function(i, val) { if (val.id != choice.id) val.selected = false; }); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp"> <div ng-controller="MyCtrl"> <div ng-repeat="field in fields"> <div ng-switch="field.type"> <div ng-switch-when="text"> <h5>Text field</h5> <hr/> <!-- code to render an input field block --> <input id="{{ field.id }}" type="text" class="form-control" ng-model="field.value" placeholder="{{ field.placeholder }}" /> </div> <div ng-switch-when="radio"> <h5>Radio field</h5> <hr/> <!-- code to render a radio block --> <div ng-repeat="choice in field.choices"> <input name="single-{{ field.id }}" type="radio" id="single-{{ choice.id }}" data-ng-model="choice.selected" data-ng-value="true" ng-change='updateRadioChoices(field, choice)' /> <label for="single-{{ choice.id }}">{{ choice.name }}</label> </div> </div> <div ng-switch-when="checkbox"> <h5>Checkbox field</h5> <hr/> <!-- code to render a checkbox block --> <div ng-repeat="choice in field.choices"> <label for="multiple-{{ choice.id }}"> <input type="checkbox" ng-model="choice.selected" ng-value="choice.id" name="multiple-{{field.id}}" id="multiple-{{ choice.id }}" />{{ choice.name }}</label> </div> </div> <!-- FALLBACK --> <div ng-switch-default>Error. Invalid HTML element type.</div> </div> </div> <h4>Fields - output</h4> <hr/> {{fields}} </div> </body>

Answer 2

如果您只是尝试创建表单， Angular Formly允许您从json渲染模板。

在AngularJS中从JSON生成HTML代码

问题描述

2 个解决方案

解决方案1
6 已采纳 2015-07-25 14:56:56

解决方案2
0 2016-04-08 20:00:10

在AngularJS中从JSON生成HTML代码

问题描述

2 个解决方案

解决方案1 6 已采纳 2015-07-25 14:56:56

解决方案2 0 2016-04-08 20:00:10

解决方案1
6 已采纳 2015-07-25 14:56:56

解决方案2
0 2016-04-08 20:00:10