Question

如何在ng-repeat上使用ui-grid并动态地将属性绑定到ui-grid？

我正在尝试这样的事情：

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

Answer 1

假设您将在控制器中为ui-grid创建选项，您可以将其作为tableData.groups数组中的对象传递。

因此，您的代码可能会返回每个网格的选项，这就是您可以将其分配给网格的方式。

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

下面是一个小例子。

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>

Answer 2

你可以写

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

并在控制器中定义$ scope.gridOptions [0]，$ scope.gridOptions [1]等。

如何在ui-grid上使用ng-repeat

2 个答案: