Table 在 AngularJS 中未正确形成

Table is not forming correctly in AngularJS

编辑 1 -

Plnkr 演示问题 - http://plnkr.co/edit/qQn2K3JtSNoPXs9vI7CK?p=preview

---------------- ORIGINAL CODE AND PROBLEM ----------------

我正在使用 angular datatable 生成 table 视图。

我的非常简单的controller代码如下-

function tableTestCtrl ($scope, DTOptionsBuilder, DTColumnBuilder, localStorageService) {
    console.log('From Table');
    var tbData = localStorageService.get('tabledata') || {};
    var dd = new Array();
    dd = [{"Name": "Tiger Nixon", "Age": "61"},{"Name": "Garrett Winters","Age": "63"}];   
    //$scope.dtOptions = DTOptionsBuilder.fromSource(dd);
    $scope.dtOptions = dd;
    console.log($scope.dtOptions);
                $scope.dtColumns = [
                DTColumnBuilder.newColumn('Name').withTitle('Name'),
                DTColumnBuilder.newColumn('Age').withTitle('Age')
            ];
}

我的查看代码-

<div class="panel-body" ng-controller="tableTestCtrl">
    <div class="table-responsive" ng-if="dtOptions">
        <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered table-hover"></table>
    </div>
</div>

以下是我得到的结果(控制台没有错误)-

如果我从行中删除注释 -

//$scope.dtOptions = DTOptionsBuilder.fromSource(dd);

正在警告以下错误 -

DataTables warning: table id=DataTables_Table_0 - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

请让我知道我在做什么错了

这样试试:

$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('data', dd);

您还可以使用 DTOptionsBuilder 设置其他选项。您尝试使用 JSON 构建完整的数据表选项,而您只需要设置 "data" 属性。

Plunkr