Looking for ideas on how to generate html inputs dynamically


#1

Hello.

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.

{
“name”:“lblORN”,
“value”:“Other Reference Number:”,
“type”:“Label”,
“xpos”:10,
“ypos”:40,
“width”:240,
“height”:20,
“tabOrder”:0,
“fontFamily”:“Tahoma”,
“fontSize”:“9”,
“foreColor”:“Black”,
“backColor”:null,
“fontStyleBold”:false,
“fontStyleItalic”:false,
“fontStyleUnderline”:false,
“maxEntries”:1,
“selectedOption”:null,
“paramValue”:[
],
“toolTip”:null,
“gridWidget”:null,
“skipBranding”:false
}

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) {
element.addClass(‘element’);

            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?


#2

Anyone has done anything similar to this?

Any idea is greatly appreciated.

Thanks.


#3

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

http://onehungrymind.com/angularjs-dynamic-templates/