AngularJS recursive directive with a dynamic HTML template

Question

I have a really hard task here. I am working on an AngularJS web app, which is capable of sending different HTTP methods to our project's Restful Web Service and receiving responses in JSON. Basically it looks like this:

enter image description here

You can create some REST resource from this application. Let's say an exam. To create an exam - you pick a resource from a list of available resources. This triggers a function, that sends a request to localhost:8080/STEP/api/explain/resorceName and gets a description for this resource. Description looks like this:

http://jsonblob.com/534fc022e4b0bb44248d6460

After receiving a response - I start building input fields like follows (allFields - array of field objects for this resource, enumValues - enum values for resource's field if it's property isEnum = true):

<div ng-repeat="field in allFields">
    <div ng-show={{!field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <input type="text" ng-model="updateEntityResource[field.name]" ng-change="getUpdateEntityAsText()"
            class="form-control" placeholder="{{parseClassName(field.type)}}">
    </div>
    <div ng-show={{field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <select ng-model="updateEntityResource[field.name]" ng-change="getUpdateEntityAsText()" class="form-control">
            <option></option>
            <option ng-repeat="enumValue in field.enumValues" label={{enumValue.name}}>{{enumValue.ordinal}}</option>
        </select>
    </div>
</div>

Now, the problem. I need to create a recursive directive, which would be capable of generating fields in such maner as described above for every resource's field that has "restResourceName" not null. To get all it's fields you just send a request to localhost:8080/STEP/api/explain/restResourceName and get similar JSON response as shown above, which is then used to build HTML elements for inputing values into model.

How can this be achieved using angular recursive directive?

Maybe check this out: http://stackoverflow.com/questions/19125551/angularjs-understanding-a-recursive-directive — Konstantin Krass, Apr 17 '14 at 12:47

Pieter Herroelen · Accepted Answer · 2014-04-17T15:17:34.540

2

I think you are on the right track. I created a small plunkr that generates a form based on a description in a js object.

index.html:

<body ng-controller="MainCtrl">

  <div my-form form-config="allFields" model="model1"></div>
  <div my-form form-config="allFields" model="model2"></div>

  Model 1: {{model1|json}}<br>
  Model 2: {{model2|json}}<br>

</body>

myForm.html (template):

<div ng-repeat="field in formConfig">
      <div ng-show={{!field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <input type="text" ng-model="model[field.name]">
      </div>
</div>

JS:

app.controller('MainCtrl', function($scope) {
  $scope.allFields = [
    {
      "isEnum": false,
      "isRequired": true,
      "name": "First name"
    },
    {
      "isEnum": false,
      "isRequired": false,
      "name": "Last name"
    }
    ];

  $scope.model1 = {};
  $scope.model2 = {"First name":"John","Last name":"Doe"};
});

app.directive('myForm', function() {
  return {
    scope: {
      formConfig:"=",
      model:"="
    },
    templateUrl:"myForm.html",
  };
});

What is it exactly you are stuck on?

edited Apr 17 '14 at 15:17

answered Apr 17 '14 at 13:19

Pieter Herroelen

5,977
2
29
37

I can't make a directive which could do the thing you did in a plunkr + is the field has restResourceName - it should be called recursively for each of it's fields. – amenoire Apr 17 '14 at 15:03
Do mean you have fields containing fields? – Pieter Herroelen Apr 17 '14 at 15:05
Yes. which can contain fields and so on – amenoire Apr 17 '14 at 15:15
If the field itself is a resource (one from the list we choose at the beginnig - it should be "opened" the same way as original root resource) – amenoire Apr 17 '14 at 15:16
I have updated my answer, it's now a directive. For the recursive part, is the end result still a "flat" form of inputs ? – Pieter Herroelen Apr 17 '14 at 15:20
It still doesn't fit :( It should also atach a ng-model of a current field to a root model like this: rootModel.field -> rootmodel.field.nestedField - > rootModel.field.nestedField.nestedField2 -> etc. That should be a realy complicated directive – amenoire Apr 17 '14 at 15:34

score 0 · Answer 2 · answered Jun 11 '14 at 09:21

I'm not sure if you have seen this already, but this sounds a lot like what you are talking about. http://jsbin.com/acibiv/3/edit

The guy who wrote it up explains it a bit here:

http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/

AngularJS recursive directive with a dynamic HTML template

2 Answers2