Question

我试图通过以下方式将数据加载到ng-table，

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="ng-table.min.css">
</head>
<body ng-app="myApp" ng-controller="mycont as vm">

<div class="container">
    <table ng-table="vm.tableParams" class="table" show-filter="true">
        <tr ng-repeat="user in $data">
            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
                {{user.name}}</td>
            <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
                {{user.age}}</td>
        </tr>
    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="ng-table.min.js"></script>

<script src="table.js"></script>
</body>

Angular脚本（在 table.js 中）

angular.module("myApp", ["ngTable"])

.controller('mycont', ['ngTableParams', function(ngTableParams) {
    var self = this;

    var data = [
        {name: "Moroni", age: 50},
        {name: "Alan", age: 45},
        {name: "Tony", age: 36}
    ];

    self.tableParams = new ngTableParams({}, { dataset: data});
}])

但我得到了一张桌子，即使是过滤器，也没有任何数据。

请帮帮我......

Answer 1

I copied your code to Plunker and it works fine，我所做的唯一更改是ngTable的JavaScript和CSS文件的网址。

仔细检查您的JavaScript控制台和网络日志是否有错误。

由于我需要包含代码以包含到Plunker的链接，因此这些是我使用的URL：

angular.js:13307 TypeError: employeeFactory.getEmployees is not a function
    at homeController.vm.getEmployees (homeController.js:11)
    at fn (eval at <anonymous> (angular.js:14157), <anonymous>:4:280)
    at expensiveCheckFn (angular.js:15146)
    at callback (angular.js:24614)
    at Scope.$eval (angular.js:16888)
    at Scope.$apply (angular.js:16988)
    at HTMLButtonElement.<anonymous> (angular.js:24619)
    at defaultHandlerWrapper (angular.js:3394)
    at HTMLButtonElement.eventHandler (angular.js:3382)

Answer 2

试试这个 -

您无法在视图中使用范围变量名称中的$，请仔细阅读Angular文档。

将 $ data 更改为 vm.tableParams.dataset

<table ng-table="vm.tableParams" class="table" show-filter="true">
        <tr ng-repeat="user in vm.tableParams.dataset">
            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
                {{user.name}}
            </td>
            <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
</table>

Answer 3

查看intro code的源代码，我注意到NgTableParams是大写的N。

ng-table不会从$ data加载任何数据

3 个答案: