我正在尝试从存储的 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 文件而变化。例如，如果类型:文本，则必须生成:
<input type="text" name="service type" value="">
我正在使用 AngularJS。我该如何实现？
最佳答案
您可以使用 angularjs-dynamic-form或自己设置自定义模板。
例如:
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>关于javascript - 在 AngularJS 中从 JSON 生成 HTML 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31627648/