如何基于数据表角度中的JSON动态填充表值？

Question

我正在使用Angular-Datatables.我需要能够根据返回的数据动态创建表.换句话说,我不想指定列标题.

例:

json数据:

[
 {
  "id": "2",
  "city": "Baltimore",
  "state": "MD",
 },
 {
  "id": "5",
  "city": "Boston",
  "state": "MA",
 },
 {
  "id": "8",
  "city": "Malvern",
  "state": "PA",
 },
]

列标题:

id,城市,州

有人可以帮忙吗？

Answer 1

这其实是个好问题！使用传统的 jQuery 数据表，这不是问题，但是我们有不同类型的声明性设置和角度数据表，这使得分离各种任务变得更加困难。我们可以使用 延迟数据的填充fromFnPromise，但不能阻止 dataTable 在我们想要它之前被实例化。我想我找到了一个可靠的解决方案：

首先，为了避免即时初始化，datatable从标记中删除指令并给出<table>anid代替，即：

<table id="example" dt-options="dtOptions" dt-columns="dtColumns" />

然后加载数据资源，构建dtColumns并dtOptions最终注入datatable属性，$compile在<table>使用id：

$http({
  url: 'data.json'
}).success(function(data) {
  var sample = data[0], dtColumns = []

  //create columns based on first row in dataset
  for (var key in sample) dtColumns.push(
    DTColumnBuilder.newColumn(key).withTitle(key)
  )
  $scope.dtColumns = dtColumns

  //create options
  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('data', data)
    .withOption('dataSrc', '')

  //initialize the dataTable
  angular.element('#example').attr('datatable', '')
  $compile(angular.element('#example'))($scope)
})

这应该适用于任何“对象数组”资源
演示 -> http://plnkr.co/edit/TzBaaZ2Msd9WchfLDLkN?p=preview

注意：已经清理了示例 JSON，我猜它是一个示例，并不打算使用尾随逗号。

Answer 2

面对同样的问题，我实际上找到了一个更容易实现和更简单（因为不使用 $compile 更安全）的解决方案。

需要对 html 进行的唯一更改是添加一个ng-if：

<table ng-if="columnsReady" datatable="" dt-options="dtOptions" dt-columns="dtColumns"/>

发生的情况是 angular 会延迟这个节点的创建，直到columnsReady有任何值。所以现在在你的代码中你可以获得你需要的数据，当你拥有它时，你只需设置columnsReady为true， angular 将完成剩下的工作。

$http({
  url: 'data.json'
}).success(function(data) {
  var sample = data[0], dtColumns = []

  //create columns based on first row in dataset
  for (var key in sample) dtColumns.push(
    DTColumnBuilder.newColumn(key).withTitle(key)
  )
  $scope.dtColumns = dtColumns

  //create options
  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('data', data)
    .withOption('dataSrc', '')

  //initialize the dataTable
  $scope.columnsReady = true;
});