how to dynamically place components in form using angular - json

Question

I have to create a 2 column form where left and right side will have different sections/groups of elements. these sections are created as directives, now i have to place these directives in the form based on the column and postion values that I recieve from the json.
{ group:"Group 1",column:1,position:2} then group1 directive should be placed on left side and in the second row of the left column. kindly suggest how to stitch these directives based on the position received

Answer 1

You can arrange your directives on the DOM as you want.
If you don't want to change elements on your DOM, You can create a directive with "C" or "A" as the required attribute (which means you can add it to any html element). Then, all you have to do is change the classes/ attribute on each position to get the desired result.
.directive('InputA', function () {
return {
restrict: 'C',
template... });
.directive('InputB', function () {
return {
restrict: 'C',
template... });
Then, your section can be like this:
<div col-m-6><div class="InputA"/><div class="InputB"/><div class="InputC"/></div>
than if you want to change the order all you have to do is change the classes to :
<div col-m-6><div class="InputC"/><div class="InputA"/><div class="InputB"/></div>
see http://jsfiddle.net/zmvr4tee/ - although i wouldn't recommend using jquery for the manipulation, i would create a parent directive that handles it but you get the idea.
Update:
added a function that recieveing a JSON, ordering it and place it according to column/position attributes.
function build(){
//you can play with column and position attributes to get different order
//recieving the JSON
var inputs = angular.fromJson('[{ "label": "firstThird","column":1,"position":3},{ "label": "secondSecond","column":2,"position":2},{ "label": "firstSecond","column":1,"position":2},{ "label": "secondThird","column":2,"position":3},{ "label": "firstFirst","column":1,"position":1},{ "label": "secondFirst","column":2,"position":1}]' );
//sorting the input to match the right postition of each directive
inputs.sort(function(a, b){
return (a.column*2+a.position)-(b.column*2+b.position);
});
//positioning the directives according to their column and postiion attributes
for(var i=0;i<3;i++)
{
$("#leftSection").children(':nth-child('+(i+1)+')').addClass(inputs[i].label);
}
for(var i=0;i<3;i++)
{
$("#rightSection").children(':nth-child('+(i+1)+')').addClass(inputs[i+3].label);
}
//compileing the form with angular to get the results
angular.element($("#myForm")).injector().invoke(function($compile) {
var scope = angular.element($("#myForm")).scope();
$compile($("#myForm"))(scope);
});
}
see update Fiddle here:Updated Fiddle