what is the best way to generate DOM elements dynamically with single ng-repeat in angular js

Question

<div class="col-lg-6" ng-repeat="controls in steps.infos"> <div class="form-group"> <label class="control-label" for="store_list">{{controls.label}}</label> <input type="{{controls.type}}" class="form-control input-lg mandatory" id="{{controls.id}}" ng-model="formData[controls.id]" value="{{controls.value}}" name="control_{{controls.id}}" ngRequired="{{controls.mandatory}}"> </div> </div>

above is my code where I am generating the dom elements dynamically only if it is input field.

I want to generate other types of input fields too. such as select box. is there any way I can achieve this by using directive or something. DOM elements are not in the order some may be input, other may be select then again inputs box might come.

Please help on this

Thanks

You can create a directive where you can insert template on the basis of controls.type — Ammar Ajmal
– Ammar Ajmal, Commented Sep 29, 2016 at 11:14
Do you want if the value is input then it should render input field, if value is select then it should render select in the ng-repeat ? — Mohit Tanwani
– Mohit Tanwani, Commented Sep 29, 2016 at 11:30

Community · Accepted Answer · 2017-05-23 11:48:19Z

You can create a directive that will take in you control as input and modify the template accordingly.

It is similar to this

Customizing the template within a Directive

EDIT:

<div ng-repeat="content in vm.contents"> <form-el formId="content.id" type="content.type" label="content.label" name="content.label" data="content.data" ></form-el> </div>

directive ::

 .directive('formEl', function () { return { restrict: 'E', compile: function(element, attrs) { var type = attrs.type || 'text'; var required = attrs.hasOwnProperty('required') ? "required='required'" : ""; if(type=='text'){ var htmlText = '<div class="control-group">' + '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' + '<div class="controls">' + '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.name + '" ' + required + '>' + '</div>' + '</div>'; } else if(type=='radio'){ var htmlText = '<div class="control-group">' + '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' + '<div class="controls">'; for(var i in attrs.data){ htmlText=htmlText+'<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.name + '" ' + required + '>'; } htmlText=htmlText + '</div>' + '</div>'; } else if(type=='selectoption'){ //add html for radio button } element.replaceWith(htmlText); } }; });

this post creates the same which I have done using ng-repeat in html. How can I identify which type it is and apply directive accordingly
no send the type in the directive and use that type there to modify template
I have added a code snippet of directive you can modify it for different input types
but how do I pass options if it a select box and how to handle radio button something like gender
I have added an example for radio button You just pass data in to directive and use that to create html This may not work perfectly as i just added it here without testing

Collectives™ on Stack Overflow

what is the best way to generate DOM elements dynamically with single ng-repeat in angular js

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related