javascript - 使用ngTable显示数据失败但没有错误

Question

我正在尝试实现官方 ng-table 主页 here 中显示的示例照原样。

所以我复制并粘贴到我的项目中，但它无法显示任何数据，如下所示:

我的HTML代码是部分html，用ngRouter加载:

<section class="content">
  <h2>TABLE</h2>
  <div ng-controller="TableCtrl">
    <p><strong>page:</strong>{{tableParams.page()}}</p>
    <p><strong>count per page:</strong>{{tabelParams.count()}}</p>
    <table ng-table="tableParams" class="table">
      <tr tr-repeat="user in $data">
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
      </tr>
    </table>
  </div>
</section>

我的JS文件是:

var app = angular.module('pean', ['ngRoute', 'ngTable'])

app.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider){
  $routeProvider.
    when('/', {
      templateUrl: 'partials/home'
    }).
    when('/test', {
      templateUrl: 'partials/test',
      controller:'TableCtrl'
    }).
    Url: 'partials/read'
    }).
    otherwise({
      redirectTo: '/'
    });
    $locationProvider.html5Mode(true);
}]);

app.controller('TableCtrl', function($scope, ngTableParams){
  var data = [
        {name: "Moroni", age: 50},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34}
    ];
    $scope.tableParams = new ngTableParams({
      page:1,
      count:10
    },{
      total:data.length,
      getData:function($defer, params){
        $defer.resolve(data.slice((params.page() -1) * params.count(), params.page() * params.count()));
      }
    });
});

我的 Chrome 控制台上没有任何错误消息。所以我看不出有什么理由这不起作用。

Answer 1

您使用的是 tr-repeat="user in $data" 而不是

ng-repeat="$data 中的用户"

在您的代码中。

尝试将您的数据添加为

$scope.data = [...]

而不是

var data = [...]

在你的 Controller 中并将其引用为

ng-repeat="数据中的用户"

在 HTML 中

希望这有帮助!