Using custom json creating angular form and getting data - json

Question

Hi I am using angular js to construct my application. I have one problem while generating dynamic form.
My json is :
{
lines :[ {
fields:[{
fieldType : "input",
labelName : "Test Label",
modelName : "testInput"
},{
fieldType : "select",
labelName : "Test Label",
options : "['opt1','opt2','opt3']",
modelName : "testSelect"
},{
fieldType : "checkbox",
labelName : "Test Label",
modelName : "testCheckbox",
options : '[{'key':'key1','value':'value1'}]"
}]
}
This is just sample json. In real time, it is more complex type. I am created separate component for all the Html Elements like "input","select","checkbox","radio"...
I am using Directives for all the input element. I am taking few details from parent scope of form to directive.
for eg:
Main Directive
<ui-form form-option='uiFormOption'></ui-form>
Above is the main directive. i am passing above json in this Main Directive.
Inside the directive, i am iterating all the lines and and calling respective directive to fill the components based on field type.
Here, in the Html component directives are creating isolated scope i need that too fine.
When i save this from, i need to get all the data in single object in ParentScope
something like
$scope.myFormData = {}; //Parent Scope controller.
when i click save, all the data must be collect. my problem is $scope in child directive. so model map not be aware to parent. How to achieve this...

Answer 1

I am not sure if I understood your question correctly, but two things popped in my mind, I am sure you tried them but just in case:
1- since you are able to get the data to the html components, bind the data directly to the object where you are collecting the data from, and since it is already accessible everywhere, you can just use it to format whatever response you need.
2- if no other option is available, you can use $scope.$root, I know it is not the best thing to do, but it is always the hack to get a shared scope for all your elements.
I hope this is what you are looking for, and in case it was not, please comment.

Answer 2

if you need to display dynamic form so fetch this kind of json object through API:
{
"status": "true",
"statusCode": 200,
"response": [
{
"sort_order": 0,
"control_name": "ion-select",
"label": "Select master OLT",
"type": "select",
"placeholder": "Select master OLT",
"name": "E0selectoption_master_olt",
"readonly": "True",
"required": "required",
"maxlength": "",
"minlength": ""
},
{
"sort_order": 1,
"control_name": "ion-select",
"label": "Select OLT port",
"type": "select",
"placeholder": "Select OLT port",
"name": "E1selectoption_olt_port",
"readonly": "True",
"required": "required",
"maxlength": "",
"minlength": ""
},
{
"sort_order": 2,
"control_name": "ion-select",
"label": "Select Parent node",
"type": "select",
"placeholder": "Select parent node",
"name": "E2selectoption_parent_node",
"readonly": "True",
"required": "required",
"maxlength": "",
"minlength": "",
"is_dependent": "true",
"masters": "gis_node",
"value": ""
},
{
"sort_order": 3,
"control_name": "ion-select",
"label": "Select child node",
"type": "select",
"placeholder": "Select child node",
"name": "E3selectoption_child_node",
"readonly": "True",
"required": "required",
"maxlength": "",
"minlength": "",
"is_dependent": "true",
"masters": "gis_node",
"value": ""
},
{
"sort_order": 4,
"control_name": "button",
"label": "submit",
"type": "submit",
"placeholder": "",
"name": "E4submit_btnsubmit",
"readonly": "False",
"required": "required",
"maxlength": "",
"minlength": "",
"is_dependent": "false",
"masters": "",
"value": ""
}
]
}
in the given response which is in JSON format.
so you can easily bind this data with our html