CODEWITHSUNDEEP
javascriptangularjsngtable
Trevor Bodily
Trevor Bodily

Reputation: 131

Scope issue with ng-table tutorial

I'm trying to implement ng-table and am following the basic steps outlined here: http://ng-table.com/#/

I'm able to get the table headers to display correctly (Name / Age with filters) however there is no data displaying.

A console log of "data" returns the appropriate information but it won't display in the table. I suspect I have a scoping issue as renaming variables allowed me to pull in the data but broke the sorting functionality which from reviewing other SO questions I understand to be because $data is required for the static data to sort.

The HTML is as follows:

    <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>

and the JS is as follows:

(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});

Upvotes: 0

Views: 379

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

You are using controllerAs: 'alerts', but in your HTML you are referring to vm.tableParams.

Change it to:

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

Also make sure you are using the correct version of ngTable, the demo uses https://unpkg.com/[email protected]/bundles/ng-table.min.js

Demo: http://plnkr.co/edit/z2SlqTl3BX5fXmh5orzV?p=preview

Upvotes: 1

Related Questions