无法在ui网格中显示嵌套数组数据?

时间:2017-10-28 23:05:48

标签: angularjs multidimensional-array angular-ui-grid ui-grid

我想在ui网格中显示嵌套数据,例如data:

[
 [
 { id:1, name:“test1 },
 { id:2, name:“test2 },
 { id:3, name:“test3 },
 { id:4, name:“test4 }
 ],
 [
 { id:5, name:“test1 },
 { id:6, name:“test2 },
 { id:7, name:“test3 },
 { id:8, name:“test4 }
 ]
]

想法是用rowTemplate修复它,但是我不能在rowTemplate.html中获取数据以使用ng-repeat作为嵌套数据,我将在同一行显示多个数据,我不想使用ui网格分组。 我认为如果数据是嵌套数据,ui网格不处理数据,如果我将使用celltemplate row.entity为空并且为空,则相同。 例如rowTemplate.html

<div
 ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
 ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
 class="ui-grid-cell"
 ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
 role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
 ui-grid-cell>

 <!—  Here i would like to use ng-repeat for the nested data but
  row.entity , colRenderIndex, col each is empty if i use {{ 
  row.entity col, ... }} result is empty blank —>

</div>

请帮助。

1 个答案:

答案 0 :(得分:-1)

非常简单。您的所有数据都驻留在数组的第一个对象中。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div ng-app="app" ng-controller="ctrl">
        <!--<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
             ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
             class="ui-grid-cell"
             ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
             role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
             ui-grid-cell>-->

            <!—  Here i would like to use ng-repeat for the nested data but
            row.entity , colRenderIndex, col each is empty if i use {{
  row.entity col, ...
            }} result is empty blank —>
        {{data}}
        <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in data[0]">
                    <td>{{row.id}}</td>
                    <td>{{row.name}}</td>
                </tr>
            </tbody>
        </table>
        <!--</div>-->
    </div>

    <script src="../lib/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('ctrl', function ($scope) {
            $scope.data=[
                 [
                 { id:1, name:'test1' },
                 { id:2, name:'test2' },
                 { id:3, name:'test3' },
                 { id:4, name:'test4' }
                 ],
                 [
                 { id:5, name:'test1' },
                 { id:6, name:'test2' },
                 { id:7, name:'test3'},
                 { id:8, name:'test4' }
                 ]
            ]
        })
    </script>
</body>
</html>