问题描述
我试图从存储的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"
}
]
}
但是，DOM元素的类型根据JSON文件而更改。 例如，如果键入：text，则必须生成：
<input type="text" name="service type" value="">
我正在使用AngularJS。 我该如何实现呢？
1楼
Matthias A. Eckhart
6
已采纳
2015-07-25 14:56:56
您可以使用或自己设置自定义模板。
例如：
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>
2楼
Betsy Dupuis
0
2016-04-08 20:00:10
如果您只是尝试创建表单， 允许您从json渲染模板。