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

編集

あなたが行った説明を反映するように私の答えを更新しました。ngGrid は、json が指定された構造に従う場合、json オブジェクト キーをテーブル ヘッダーに自動的に割り当てます。

plunkrも更新しました。

サーバーから送信されるデータの構造を制御できない場合は、データを構造に変更できます。

または、grid.exampleGrid.columnDefs受信データから構築できる別のスコープ変数を監視するように設定することもできます。