无法使用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 consol上没有任何错误消息。所以我认为没有任何理由说这不起作用。

Answer 1

您正在使用tr-repeat="user in $data"代替

ng-repeat="user in $data"

代码。

尝试将您的数据添加为

$scope.data = [...]

而不是

var data = [...]

在控制器中

并将其作为

引用

ng-repeat="user in data"

HTML中的

希望这有帮助！