如何动态排列网格中的项目答案

【问题标题】：How to arrange items in grid dynamically如何动态排列网格中的项目
【发布时间】：2013-06-27 16:22:29
【问题描述】：

我正在从 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 中的第一个搜索框应排列在第一行的第二个网格中。并且按钮应排列在第 3 行的第 2 个网格中。我怎样才能做到这一点。无论如何我都在使用 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>

【问题讨论】：

我已经回答了这个问题。可能对其他人有帮助。

标签： json dynamic angularjs grid

【解决方案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>';   
    }

}

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

【讨论】：