Dynamically render a directive from a JSON array

Question

I would like to pass my SPA a JSON array and render controls and directives based on what is in the array.

I have all the controls rendering based on the answer found here; plunker link

However, I also have custom directives that I'd like to render but I don't want to specify each of them in the HTML. Instead I'd like to just do something like;

<div ng-if="field.type=='directive'" class="form-group {{field.css}}">
  <{{field.directive}}></{{field.directive}}>
</div>

and then in the JSON object specify which directive to render;

app.directive("testDirective", function(){
    return {
        restrict: 'E',
        scope: {},
        template: '<h2>This is a custom directive to show that we can render these also.</h2>',
        replace: true
    };
})

And add that directive to the list of controls to render;

fields :
        [
          {type: "directive", directive:"test-directive", name: "td1", data: ""},

The code I have created simply outputs;

<test-directive>

as text and not as the control itself.

Any thoughts?

I believe this is much more easy to do in angular 2/4 using dynamic forms — Saurabh Agrawal
– Saurabh Agrawal, Commented Dec 8, 2017 at 4:56
take a look at angular-formly. I haven't used it for several years but it is highly extendable for creating dynamic forms — charlietfl
– charlietfl, Commented Dec 8, 2017 at 5:03

Arun AK · Accepted Answer · 2017-12-08 09:55:58Z

As @charlietfl and @Saurabh Agrawal, there are easy ways in angular 2 & 4. But, still for your reference, I have made a solution in angular 1. Now the template will render based ion the data type in your JSON.

HTML code :

<body ng-app="dynamicDirective" ng-controller="MyModule">
 <div ng-repeat="field in entity.fields">
   <dynamic-field data='field'> </dynamic-field>
   <br/>
 </div>
</body>

Script code:

app.directive('dynamicField', function() {
  return {
    restrict: 'E',
    scope: {
      data: "="
    },
    templateUrl: 'template.html',
    link: function(scope, element, attrs) {

    }
  }
});

And this is the template html file in which the field will be rendering based on the type in the JSON data. Refer the link below

<!-- Text Template -->
<div ng-if="data.type === 'text'">
  {{data.name}} <input type="text"/>
</div>

<!-- Radio Template -->
<div ng-if="data.type === 'radio'">
  {{data.name}} 
  <div ng-repeat="option in data.options">
    <input type="radio" value="option.name" />{{option.name}}
  </div>
</div>

<!-- Email Template -->
<div ng-if="data.type === 'email'">
  {{data.name}} <input type="text"/>
</div>

<!-- Password Template -->
<div ng-if="data.type === 'password'">
  {{data.name}} <input type="password"/>
</div>

<!-- Select Template -->
<div ng-if="data.type === 'select'">
  {{data.name}} <select><option ng-repeat="option in data.options">
    {{option.name}}</option></select>
</div>

<!-- Checkbox Template -->
<div ng-if="data.type === 'checkbox'">
  {{data.name}} 
  <div ng-repeat="option in data.options">
    <input type="checkbox" value="option.name" />{{option.name}}
  </div>
</div>

Plnkr Link

Hope it helps :)

Collectives™ on Stack Overflow

Dynamically render a directive from a JSON array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related