AngularJS recursive directive with a dynamic HTML template (bounty)
Posted
by
Nazar Sobchuk
on Stack Overflow
See other posts from Stack Overflow
or by Nazar Sobchuk
Published on 2014-04-17T12:12:31Z
Indexed on
2014/06/11
9:25 UTC
Read the original article
Hit count: 205
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.
© Stack Overflow or respective owner