ng-table 教程的范围问题

Question

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

我能够让 table headers 正确显示（姓名/年龄与过滤器）但是没有数据显示。

控制台日志 "data" returns 适当的信息但它不会显示在 table 中。我怀疑我有一个范围界定问题，因为重命名变量允许我提取数据但破坏了排序功能，从审查我理解的其他 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 版本正确，演示使用 https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js

演示： http://plnkr.co/edit/z2SlqTl3BX5fXmh5orzV?p=preview

ng-table 教程的范围问题

Scope issue with ng-table tutorial

javascript

angularjs

ngtable