Angularjs ng-grid分为两列?

时间:2014-08-07 11:09:10

标签: angularjs ng-grid

我需要能够将ng-grid从一列扩展为两列:

$scope.gridOptions = {
        data: 'myData',
        columnDefs: [{ field: "name", width: 120},
                    { field: "age", width: 120 }]
    };

上面给了我这个:

     __________
    | name| age|
    |----------|
    | john| 25 |
    | anne| 21 |
    | joe | 22 |
    | mary| 31 |
    ------------

理想情况下,我想在同一个表/网格中结束以下内容:

     ________________________
    | name | age | name | age|
    |------------------------|
    | john | 25  | joe  | 22 |
    | anne | 21  | mary | 31 |
    -------------------------

JSON:

$scope.myData = [
          {name: "john", age: 25},
          {name: "anne", age: 21},
          {name: "joe", age: 22},
          {name: "mary", age: 31}
];

非常感谢您的帮助

1 个答案:

答案 0 :(得分:0)

实现这一目标的最简单方法是忘记ng-grid并使用简单的ng-repeat实现它并正确设置你的布局样式。

检查jsfiddle http://jsfiddle.net/vittore/yojmjxv1/

<div ng-app='myApp' ng-controller='MyCtrl as c' class='container'>
    <div ng-repeat-start='u in c.users' class='field'>
        {{ u.name }}
    </div>
    <div ng-repeat-end class='field'>
        {{ u.age }}
    </div>    
<div>

和最小风格:

.field { width : 120px; float:left; margin:0; }

.container { width : 480px; padding:0; }