angularjs ng-table/ng-repeat 行未加载

Question

我正在尝试按照教程 Here 使用 ng-Table。如果我从 Git 下载整个示例，那么它加载正常，但我自己尝试遵循最简单的示例，然后加载列 headers 和过滤器，但没有行？如果我在 HTML 中手动添加另一行，它确实会出现，所以问题似乎是数据绑定或 ng-repeat。控制台中没有显示任何错误。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
    <link rel="stylesheet" ; href="https://unpkg.com/ng-table@4.0.0/bundles/ng-table.css">
    <script src="https://unpkg.com/ng-table@4.0.0/bundles/ng-table.js"></script>
</head>
<body>

    <div ng-app="MyApp" ng-controller="MyCtrl">

        <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>
        var app = angular.module("MyApp", ["ngTable"]);

        app.controller('MyCtrl', function ($scope, NgTableParams) {
            var self = this;
            var data = [{ name: "Moroni", age: 50 } /*,*/];
            self.tableParams = new NgTableParams({}, { dataset: data });
        });

    </script>
</body>
</html>

Answer 1

您没有在范围内分配对象

试试下面的代码而不是你的代码

    app.controller('MyCtrl', function ($scope, NgTableParams) {
        var self = this;
         self.data  = [{ name: "Moroni", age: 50 } /*,*/];
        self.tableParams = new NgTableParams({}, { dataset:  self.data });
    });

Answer 2

您还没有指定您的控制器参考。

将代码更改为 <div ng-app="MyApp" ng-controller="MyCtrl as vm">，它将按您预期的方式运行。

工作示例：http://codepen.io/DeividasK/pen/qrWqey?editors=1010

Answer 3

这是 ng table，问题是您将控制器用作 vm，只需删除 vm 或将控制器用作 vm 即可。

 <table ng-table="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>

angularjs ng-table/ng-repeat 行未加载

angularjs ng-table/ng-repeat rows not loading

html

javascript

angularjs

angularjs-ng-repeat

ngtable