ng-table problems with running basic example

问题

I wanted to run the most basic scenario of usage of the ng-table angular module: http://ng-table.com/#/ My code:

<div ng-controller="View2Ctrl as vm">
    <table ng-table="vm.tableParams" class="table table-striped" show-filter="true">
        <tr ng-repeat="row in $data">
            <td title="'Id'" filter="{ id: 'number'}" sortable="'id'">
                {{row.id}}</td>
            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
                {{row.name}}</td>
        </tr>
    </table>
</div>


'use strict';

angular.module('myApp.view2', ['ngRoute', 'ngTable'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view2', {
    templateUrl: 'view2/view2.html',
    controller: 'View2Ctrl'
  });
}])

.controller('View2Ctrl', ['ngTableParams', function(ngTableParams) {
    var self = this;
    self.tableParams = new ngTableParams({}, { dataset: itemsGlobal2});
}]);

var itemsGlobal2 = [
        {"id":1,"name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 
        {"id":2,"name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 
        {"id":3,"name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"}, 
        {"id":4,"name":"name 4","description":"description 1","field3":"field3 4","field4":"field4 4","field5 ":"field5 4"}, 
        {"id":5,"name":"name 5","description":"description 1","field3":"field3 5","field4":"field4 5","field5 ":"field5 5"}, 
        {"id":6,"name":"name 6","description":"description 1","field3":"field3 6","field4":"field4 6","field5 ":"field5 6"}, 
        {"id":7,"name":"name 7","description":"description 1","field3":"field3 7","field4":"field4 7","field5 ":"field5 7"}
];

I tried to assign my array to the dataset property (statically, as in linked example). Result - the table was not loading any data. I couldn't get it working anyway. Then I took a look at examples of usage not from the project's webpage and I couldn't find any which was using the approach with setting the 'dataset' property statically. So instead of doing it, I started using getData() function in wich I just returned my static array. After that, it started showing my data :) Changes:

.controller('View2Ctrl', ['ngTableParams', function(ngTableParams) {
    var self = this;
    self.tableParams = new ngTableParams({
        page: 1,
        count: 10
    }, { 
        total: itemsGlobal2.length,
        getData: function($defer, params) {
            self.items = itemsGlobal2;
            params.total(self.items);
            $defer.resolve(self.items);
        }
    });
}]);

But there was another problem. None of table's functionalities were working (no paging, no filtering, no sorting).

I was only trying to use the simplest scenario from their webpage and I spent a whole day doing it and it's still not working... Am I doing something wrong, or is there any bug in code or documentation?

回答1:

I was having the same problem loading static data in ng-table (I'm using v0.8.3, by the way). After logging/printing tableParams, I found out that it uses data instead of dataset.

So in your example, can you try the following instead?

.controller('View2Ctrl', ['ngTableParams', function(ngTableParams) {
    var self = this;
    self.tableParams = new ngTableParams({}, { data: itemsGlobal2});
}]);

来源：https://stackoverflow.com/questions/33675983/ng-table-problems-with-running-basic-example

标签

angularjs

ngtable