AngularJS recursive directive with a dynamic HTML template (bounty)
- by Nazar Sobchuk
I have a realy 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. Basicaly it looks like this:
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.
Does anyone know how this can be achieved using angular recursive directive? Every useful answer is highly appreciated and evaluated. The correct answer will get +50 or I will start a bounty, because I'm realy stuck with this for 2 days.
If you need any additional info - let me know.
Thank you.
