运行基本示例的ng-table问题

时间:2015-11-12 16:09:09

标签: angularjs ngtable

我想运行使用ng-table角度模块的最基本方案: http://ng-table.com/#/ 我的代码:

<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"}
];

我尝试将数组分配给数据集属性(静态地,如链接示例中所示)。结果 - 表未加载任何数据。无论如何我无法让它工作。 然后我看了一下不是来自项目网页的使用示例,我找不到任何使用该方法静态设置'dataset'属性的方法。所以我没有这样做,而是开始使用getData()函数,我刚刚返回静态数组。之后,它开始显示我的数据:)更改:

.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);
        }
    });
}]);

但还有另一个问题。表的功能都没有工作(没有分页,没有过滤,没有排序)。

我只是试图在他们的网页上使用最简单的场景,我花了整整一天时间做这件事而且仍然无法正常工作......我做错了什么,或者代码或文档中是否有任何错误?

1 个答案:

答案 0 :(得分:0)

我在ng-table中加载静态数据时遇到了同样的问题(顺便说一句,我使用的是v0.8.3)。记录/打印tableParams后,我发现它使用data代替dataset

因此,在您的示例中,您可以尝试以下方法吗?

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