Menu
I am attempting to generate HTML code dynamically from a stored JSON file. The JSON file format:
{
"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. For example, if type: text, then this has to be generated:
<input type="text" name="service type" value="">
I'm using AngularJS. How can I implement this?
702
You can use angularjs-dynamic-form or setup a custom template by yourself.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
