json - How to arrange items in grid dynamically

Question

I am creating a webpage dynamically from on a json script. Here is my JSON script.

pageitems = [          
        {
                    isArray:false,
            type : 'text',
            label : 'Search here',
            grid : 'grid2'              
        },
        {
            isArray : true,
            elements : [
                {'label' : 'Btn1', type : 'button'},
                {'label' : 'Btn2', type : 'button'},
                {'label' : 'Btn3', type : 'button'}
            ],
            grid : 'grid8'
        }
   ]

So I want to get the actual html script for the display. I have 3-grids in single row. so the first search-box from the json should be arranged in 2nd grid of first row. and the buttons should be arranged in 2nd grid of 3rd row. How can I do this. I am using angularjs anyway.

I am using something like this, but its not getting arranged in grid.

<div ng-controller='someCtrl'>
  <div ng-repeat='pageitem in pageitems'>
     <div ng-show='pageitem.isArray'>
      <div ng-switch='pageitem.grid'>
        <div class='span3' ng-switch-when='1'>
           <div ng-repeat='element in pageitem.elements'>
             <input type='{{element.type}}' value='{{element.label}}'>
           </div>
        </div>
        <div class='span3' ng-switch-when='2'>
           <div ng-repeat='element in pageitem.elements'>
             <input type='{{element.type}}' value='{{element.label}}'>
           </div>
        </div>
        <div class='span3' ng-switch-when='3'>
           <div ng-repeat='element in pageitem.elements'>
             <input type='{{element.type}}' value='{{element.label}}'>
           </div>
        </div>
        <! ---- and continues ---->
      </div>
     </div>
     <div ng-hide='pageitem.isArray'>
        <input type='{{element.type}}' value='{{element.label}}'>
     </div>

  </div>
</div>

Answer 1

我已经对这个问题做出了回答。可能对其他人有帮助。
要遵循的步骤：
1）在html页面中制作网格。我制作了一个固定网格 (12x12)
2) 为每个网格提供相同的 ID。
3）为这个页面做一个控制器，在js文件中做一些dom操作。这是样本...

<!index.html>

<div ng-controller='someCtrl'>
   <div class='span1' id='grid1'></div>
   <div class='span1' id='grid2'></div>
   ....
   ....
   <div class='span1' id='grid1000'></div>
</div>

这是javascript

function someCtrl() {
    $scope.data = //the json script goes here;
    var n = //take the length of json object
    for(var i=0;i<n;i++)
    {
       document.getElementById($scope.data[i].grid).outerHTML = '<div class='span6'>this is from dynamic content </div>';   
    }

}

它对我来说效果很好。希望它会有所帮助。