angularjs - 将动态数组绑定到列标题

Question

如何将一组更改数据绑定到列标题？

我看过那个样本：http ://ui-grid.info/docs/#/tutorial/302_custom_header

但它只是显示静态数据。

我需要将列标题绑定到日期对象数组。

Answer 1

网格数据可以配置为观察范围变量。这是一个从服务器调用加载数据的示例。

  angular.module('app', ['ngGrid'])
  .controller('GridCtrl', function($scope, $http){
    var grid = this;

    grid.exampleGrid = {
        enableCellSelection: false,
        enableRowSelection: false,
        enableCellEdit: false,
        enableColumnResize: true,
        enableColumnReordering: true,
        data: 'gridData',
    };

    $http.get('/some/data/source').success(function(data){
      $scope.gridData = data
    });
  });

服务器返回 json

[
   {
         "Name": "Greg",
         "Date": 0
      },
   {
         "Name": "Marly",
         "Date": 7
      },
   {
         "Name": "Frank",
         "Date": 4
      }
]

有视野

    <div ng-app="app">
      <div ng-controller="GridCtrl as grid">
        <div class="gridStyle" ng-grid="grid.exampleGrid"></div>
      </div>
    </div>

和工作plunkr

编辑

更新了我的答案以反映您所做的澄清。如果 json 遵循给定的结构，ngGrid 将自动将 json 对象键分配给表头。

也更新了 plunkr。

如果您无法控制来自服务器的数据结构，则可以将其修改为结构。

或者，grid.exampleGrid.columnDefs可以将 设置为观察一个单独的范围变量，您可以从传入的数据构造该变量。