Question

我正在尝试实施ng-table，并遵循此处列出的基本步骤：http://ng-table.com/#/

我能够正确显示表头（带过滤器的名称/年龄）但是没有数据显示。

“data”的控制台日志会返回相应的信息，但不会显示在表格中。我怀疑我有一个范围问题，因为重命名变量允许我提取数据，但打破了排序功能，从检查其他我理解的SO问题是因为需要静态数据排序的$ data。

HTML如下：

    <div id="manager-dashboard-alerts-page">
    <div class="main">
        <div class="title">
            <h1></h1>
            <h4></h4>
        </div>
<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>

和JS如下：

(function () {
"use strict";

angular
.module('roomchoice.manager-dashboard.alerts', [
  'ui.router',
  'ngTable'
])

.config(function config($stateProvider) {
  $stateProvider.state('manager.alerts', {
    url: '/alerts',
    views: {
      "main": {
        controller: 'AlertsController',
        controllerAs: 'alerts',
        templateUrl: 'manager-dashboard/alerts/alerts.tpl.html'
      }
    }
  });
})

.controller('AlertsController', AlertsController);

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

Answer 1

您使用的是controllerAs: 'alerts'，但在您的HTML中，您指的是vm.tableParams。

将其更改为：

<table ng-table="alerts.tableParams" ...

还要确保您使用的是ngTable的正确版本，该演示使用read

演示： https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js

ng-table教程的范围问题

1 个答案: