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的第一个搜索框应排列在第一行的第二个网格中。按钮应排列在第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>

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

}

这对我来说非常好。希望它会有所帮助。

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

1 个答案: