如何在數據表angular中基於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 dataTables來說，這不是問題，但是對於角度數據表，我們有另一種聲明式設置，這使得分離各種任務更加困難。 我們可以使用fromFnPromise延遲數據fromFnPromise ，但不能阻止dataTable在需要之前實例化。 我想我找到了一個可靠的解決方案：

首先，為避免立即初始化，請從標記中刪除datatable指令，並為<table>一個id ，即：

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

然后加載數據資源，構建dtColumns和dtOptions ，最后注入datatable屬性，並使用id $compile <table> ：

$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"/>

發生的是，角度將延遲此節點的創建，直到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;
});

Answer 3

下面的代碼將根據數據動態為您提供表格

的HTML

<div ng-controller="WithAjaxCtrl as showCase">
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>

JS

angular.module('showcase.withAjax',['datatables']).controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
    .withPaginationType('full_numbers');
vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('city').withTitle('City'),
    DTColumnBuilder.newColumn('state').withTitle('State')
];

}

data.json

[{
"id": 860,
"city": "Superman",
"state": "Yoda"
}, {
"id": 870,
"city": "Foo",
"state": "Whateveryournameis"
}, {
"id": 590,
"city": "Toto",
"state": "Titi"
}, {
"id": 803,
"city": "Luke",
"state": "Kyle"
 },
 ...
 ]