javascript - 如何在数据表angular中基于JSON动态填充表值？

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

示例:

json数据:

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

列标题:

ID，城市，州

有人可以帮忙吗？

最佳答案

这实际上是一个好问题!对于传统的jQuery dataTables来说，这不是问题，但是我们使用 Angular dataTables进行另一种声明式设置，这使得分离各种任务更加困难。我们可以使用fromFnPromise延迟数据的填充，但是不能阻止dataTable在需要之前被实例化。我想我找到了一个可靠的解决方案:

首先，为避免即时初始化，请从标记中删除datatable指令，并为<table>赋予id，即:

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

然后加载数据资源，构建dtColumns和dtOptions，最后使用datatable注入(inject)$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，我想它只是一个示例，并不意味着要使用尾随逗号。