CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-ui-grid
userbb
userbb

Reputation: 1874

How use ng-repeat on ui-grid

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>

Upvotes: 2

Views: 3542

Answers (2)

ExpectoPatronum
ExpectoPatronum

Reputation: 507

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>

Upvotes: 1

www.admiraalit.nl
www.admiraalit.nl

Reputation: 6099

You can write

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

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

Upvotes: 0

Related Questions