Looking for ideas on how to generate html inputs dynamically



I am trying to see if something like this is possible. I have an application written in GWT that I wanted to port over to ionic framework, and I am literally stuck at one requirement.

The screen elements are basically a json data that has all the elements information. For example, one element definition looks something like this.

“value”:“Other Reference Number:”,

In short, the screen is made of these different element widgets that I need to want to dynamically create the values.

I am guessing the directives is the way to go…

Then, I can define the “element directive something along this line”…

angular.module(‘depDirectives’, [])
.directive(‘element’, function () {
return {
restrict: ‘E’,
link: function (scope, element, attrs) {

            scope.$watch(attrs.x, function (x) {
                element.css('left', x + 'px');
            scope.$watch(attrs.y, function (y) {
                element.css('top', y + 'px');
            scope.$watch(attrs.w, function (w) {
                element.css('width', w + 'px');
            scope.$watch(attrs.h, function (h) {
                element.css('height', h + 'px');
            scope.$watch(attrs.fore-color, function (color) {
                element.css('foregroundColor', color);
            scope.$watch(attrs.back-color, function (color) {
                element.css('backgroundColor', color);


Now, the problem where I am clueless is how to create the html inputs dynamically.

For example, if the screen type is label, I just want to put it in <label>.

If the type is “textbox”, I need to create ’<input type="text" ..."

You got the idea…

All the examples that I saw, the template is basically hard coded… How can I generate the html at runtime, depending on the types of screen element?


Anyone has done anything similar to this?

Any idea is greatly appreciated.



For those who are interested, I found what I was looking for here…