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

我正在使用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它不是问题，但是我们使用angular dataTables进行了不同类型的声明性设置，这使得分离各种任务变得更加困难。 我们可以使用fromFnPromise延迟数据fromFnPromise ，但不能阻止dataTable在我们想要之前被实例化。 我想我找到了一个可靠的解决方案：

首先，为了避免即时初始化从标记中删除datatable指令，而是给

一个id ，即：

然后加载数据资源，构建dtColumns和dtOptions ，最后注入datatable属性，并使用id $compile

：

 $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 ：

会发生什么是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; }); 

Answer 3

下面的代码将根据数据动态地为您提供表格

HTML

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" }, ... ]