How use ng-repeat on ui-grid

Question

How to use ng-repeat on ui-grid and bind attribute to ui-grid dynamically?

I was trying something like this:

 <div ng-repeat="group in tabledata.groups track by $index">
      <div ui-grid="gridOptions+$index" class="myGrid"></div>
 </div>

Can you provide more details on what you want to achieve. It seems you want to dynamically create ui-grid but is your options array going to created dynamically ? — ExpectoPatronum, Oct 24 '15 at 12:53
Yes. I want to create some ui-grids dynamically and also create dynamically ui-grid="gridOptionsX" where X is index of grid. And next in controller I want to assign to each gridOptions1, gridOptions2..etc. data — userbb, Oct 24 '15 at 13:07

score 1 · Answer 1 · answered Oct 24 '15 at 18:58

Assuming you will form options for ui-grid in your controller, you can pass it as an object in your tableData.groups array.

So your code might return the options for each grid and this is how you can assign it to grid.

<div ng-repeat="group in tabledata.groups track by $index"> <div ui-grid="group" class="myGrid"></div> </div>

Below is a small example of the same.

var app = angular.module("gridApp", ['ui.grid']);
app.controller("gridCntrl", ["$scope", function($scope){
  
  $scope.tabledata = {};
  
  // Data 1
    $scope.resultData0 =  [{
            name: "Tom",
            country: "US"
        },
              {
            name: "Jerry",
            country: "UK"
        },
              {
            name: "Mickey",
            country: "IND"
        }];
  
  // Options 1
    $scope.options0 = {
        data: 'resultData0',
        columnDefs: [{
            field: 'name',
            displayName: "Name"
        },
         {
            field: 'country',
            displayName: "Country"
        }]
       
    }
    
    // Data 2
    $scope.resultData1 =  [{
            capital: "Washington DC",
            country: "US"
        },
              {
            capital: "London",
            country: "UK"
        },
              {
            capital: "New Delhi",
            country: "IND"
        }];
  
  // Options 2
    $scope.options1 = {
        data: 'resultData1',
        columnDefs: [{
            field: 'country',
            displayName: "Country"
        },
         {
            field: 'capital',
            displayName: "Capital"
        }]
      }
    
    $scope.tabledata.groups = [$scope.options0, $scope.options1]
}]);

.ui-grid-style {
    width: 400px;
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css" />
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js"></script>

<div class="container" ng-app = "gridApp">
    <div ng-controller="gridCntrl">
      <div class="row" ng-repeat="group in tabledata.groups">
        <div class="col-sm-12">
            <div ui-grid="group" class="ui-grid-style"></div>
        </div>
    </div>
     </div>
</div>

score 0 · Answer 2 · answered Oct 24 '15 at 13:48

0

You can write

<div ui-grid="gridOptions[$index]" class="myGrid"></div>

and in the controller, define $scope.gridOptions[0], $scope.gridOptions[1] etc.

answered Oct 24 '15 at 13:48

www.admiraalit.nl

5,768
1
17
32

Hi, I tried this way for one of my work. The scenario is like having multiple ui-grid in single page. I have an editable cell in column for each grid. When I edit cell for grid-1, the other grid-2 cell is also appending the values. Means they work link two-way binded. I want them to be independent grids. How can it be resolved? – Vinay Gayakwad Feb 23 '17 at 12:39

How use ng-repeat on ui-grid

2 Answers2