Как упорядочить элементы в сетке динамически

Question

Я динамически создаю веб-страницу из сценария json. Вот мой сценарий JSON.

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' 
     } 
    ] 

Поэтому я хочу получить фактический html-скрипт для отображения. У меня 3 сетки в одном ряду. поэтому первый поисковый ящик из json должен быть расположен во второй сетке первой строки. и кнопки должны быть расположены во второй сетке третьего ряда. Как я могу это сделать. В любом случае, я использую angularjs.

Я использую что-то вроде этого, но его не устраивает сетка.

<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) Дайте идентичный идентификатор для каждой сетки.
3) Создайте контроллер для этой страницы и выполните некоторые операции dom в файле js. Вот пример ...

<!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>'; 
    } 

} 

Это работает очень хорошо для меня. Надеюсь, это будет полезно.