Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am trying to generate a form from a JSON to build an object. This object may include subobjects. The JSON looks like this:

[{key:'name',
  name: 'Name',
  type:'STRING'},
 {key:'type', 
  name:'Type', 
  type:'SELECT', 
  choices:[{
    value:'choice1',
    name:'Choice 1'}]},
 {key:'connection',
  name:'Connection',
  type:'OBJECT',
  properties:[{
    key:'ip',
    name: 'IP-Adress',
    type: 'STRING'},
   {key:'port',
    name:'Port',
    type: 'NUMBER'}]}]

My html looks like this:

<form role="form" name="form" class="css-form">
<div class="form-group" ng-repeat="field in json">
    <label>{{field.name}} :</label>
    <div ng-if="field.type==='OBJECT'" ng-repeat="nextField in field.properties">
        <input ng-if="nextField.type==='STRING'" ng-model="sessionEntity[field.key][nextField.key]" type="text" class="form-control">
        <input ng-if="nextField.type==='NUMBER'" ng-model="sessionEntity[field.key][nextField.key]" type="number" class="form-control" style="width:50px">
        <select ng-if="nextField.type==='SELECT'" class="form-control" ng-model="sessionEntity[field.key][nextField.key]" ng-options="option.value as option.name for option in nextField.choices">
</select>
    </div>
    <input ng-if="field.type==='STRING'" ng-model="sessionEntity[field.key]" type="text" class="form-control">
    <input ng-if="field.type==='NUMBER'" ng-model="sessionEntity[field.key]" type="number" class="form-control" style="width:50px">
    <select ng-if="field.type==='SELECT'" class="form-control" ng-model="sessionEntity[field.key]" ng-options="option.value as option.name for option in field.choices">
    </select>
</div>
</form>

sessionEntity looks like this:

{name: 'Name',
 type:'choice1',
 connection:{ip:'192.168.0.1',port:8000}}

This works for objects with a property of type 'OBJECT' on the first level. But I don't know in advance how deep the nesting goes. I tried to put a function in 'ng-model' but Expression '{0}' is non-assignable. Element: {1}. I could extend the html-code to check again on every deeper level, but that is not a satisfying solution and results in a whole lot of redundant code. Does someone know how to solve this in a fancy way?

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.