我需要在ui-grid中显示一个字符串数组。单行,每个ui网格一行

时间:2016-09-15 12:42:26

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

我需要在一行ui-grid行中显示数组中的每个数据。请帮帮我,不管它是否正确?因此data[0]应显示在一个ui-grid中,data[1]应显示在另一个ui-grid中,因此它在单个页面中看起来是多个ui-grid。 但是请帮助我解决每个条件的情况,因为我知道有多少数据。

Controller.js:

             $rootScope.viewFollowup; // In this am having 'n' of datas only
             $scope.gridView={};

             $scope.data1= $.makeArray($rootScope.viewFollowup[0]);
             $scope.data2= $.makeArray($rootScope.viewFollowup[1]);
             $scope.data3= $.makeArray($rootScope.viewFollowup[2]);
           //$scope.gridOptions -- in this grid options am having all the columndefs                      details 

             $scope.aa=$scope.gridOptions;
             $scope.aa.data= $scope.data1;        

            $scope.ab= $scope.gridOptions;
            $scope.ab.data= $scope.data2;

            $scope.ac=$scope.gridOptions;
            $scope.ac.data=$scope.data3;    

            $scope.gridView=[$scope.aa,$scope.ab,$scope.ac];
            $rootScope.tabledata=$scope.gridView;

HTML:

<div class="row" ng-repeat="group in tabledata track by $index">
    <div ui-grid="group" page-equalheight ui-grid-resize-columns ui-grid-selection ui-grid-auto-resize class="grid" style=style="height:250px"></div>
</div>

输出:

Grid View 1
-------------------------------------------
a| b| c|d|
-------------------------------------------

Grid View 2
-------------------------------------------
c| d| e|f|
-------------------------------------------

    but what am getting is:
  Grid View 1
-------------------------------------------
c| d| e|f|
-------------------------------------------

Grid View 2
-------------------------------------------
c| d| e|f|
-------------------------------------------

1 个答案:

答案 0 :(得分:0)

所有ui-grid需求都是gridOptions对象,其中包含要在网格上显示的数据。您可以将这些gridOptions放入数组中,然后使用ng-repeat在标记中循环它们。这是一个例子:

var gridOptions1 = {
data: [{
  "name": "Ethel Price",
  "gender": "female",
  "company": "Enersol"
}, {
  "name": "Claudine Neal",
  "gender": "female",
  "company": "Sealoud"
}, {
  "name": "Beryl Rice",
  "gender": "female",
  "company": "Velity"
}, {
  "name": "Wilder Gonzales",
  "gender": "male",
  "company": "Geekko"
}]
};
var gridOptions2 = {
data: [{
  "name": "Georgina Schultz",
  "gender": "female",
  "company": "Suretech"
}, {
  "name": "Carroll Buchanan",
  "gender": "male",
  "company": "Ecosys"
}, {
  "name": "Valarie Atkinson",
  "gender": "female",
  "company": "Hopeli"
}, {
  "name": "Schroeder Mathews",
  "gender": "male",
  "company": "Polarium"
}, {
  "name": "Lynda Mendoza",
  "gender": "female",
  "company": "Dogspa"
  }]

 };

$ scope.grids = [gridOptions1,gridOptions2];

然后在您的标记中,您可以使用ng-repeat,如:

<div ng-repeat='options in grids'>
  <div id="grid1" ui-grid="options" class="grid"></div>
</div>

Here是上述示例中的一个有用的工具。