AngularJS ngTable不起作用

时间:2015-11-20 15:33:53

标签: angularjs web-services factory ngtable

我之前已经将ngTable用于静态数据,它运行良好(列表,排序和过滤)。我使用ngTable v 0.8.3

我的目标

这次我想创建一个包含从Web Service加载的数据的ngTable。 我创建了一个自定义工厂,以便能够与未来的其他实体一起创建我的ngTable。

问题

它没有工作,我没有JS控制台错误。当我调试时,我可以清楚地看到我的服务员工的方法查询返回我包含员工详细信息的完整和正确的对象。我输入了getData()函数,正在创建ngTable,但是空数据。

相关且轻量级的代码

这是我的HTML标记:

 <table ng-table="tableParams" class="table table-striped" show-filter="true">
      <tbody>
           <tr ng-repeat="employee in $data">      
   <td data-title="'employee.firstname' | translate" filter="{'firstname' : 'text'}" sortable="'firstname'"><a ui-sref="employee.detail({id:employee.id})">{{employee.firstname}}</a></td>
   <td data-title="'employee.lastname' | translate" filter="{lastname : 'text'}" sortable="'lastname'">{{employee.lastname}}</td>
   <td data-title="'employee.mail' | translate" filter="{mail : 'text'}" sortable="'mail'">{{employee.mail}}</td>
   <td data-title="'employee.phone-number' | translate" filter="{phone_number : 'text'}" sortable="'phone_number'">{{employee.phone_number}}</td>
   <td data-title="'employee.birthdate' | translate" filter="{birthdate : 'text'}" sortable="'birthdate'">{{employee.birthdate}}</td>      
           </tr>
      </tbody></table>

我的Angular控制器:

myapp.controller('EmployeeController', function ($rootScope, $scope, Employee, ngTableParams, ngTableFactory) {
       $scope.tableParams = ngTableFactory.create(20, {lastname: 'asc'});   // count, sorting
});

我的Angular工厂:

myapp.factory('ngTableFactory', function(ngTableParams, Employee) {
    return {
        create: function(count, sorting) {
            return new ngTableParams({
                page: 1,            // initial page
                count: count,       // count per page
                sorting: sorting    // initial sorting
            }, {
                total: 0,
                getData: function($defer, params) {
                    Employee.query({page: params.page(), size: params.count()}, function(result) {
                        $defer.resolve(result);
                    });
                }
            });
        }
    }
});

编辑1,进展:

如果我从查询方法中删除了params,那么我的项目就会被列出,所以这对我的Employee服务的处理很糟糕。但是,默认情况下,排序和过滤器在我的表上不起作用。为了使排序工作,我必须在我的ngTable工厂,在getData()函数中添加这一行:

result = $filter('orderBy')(result, params.orderBy());

通常情况下,基本元素的排序会起作用,因为我添加了“可排序的”#39;我的HTML ngtable模板列中的关键字,以及我在$ data项目上获取数据的方式。还在调查。

感谢您的帮助伙伴们!

1 个答案:

答案 0 :(得分:1)

据我所知,您的代码可以运作。

请参阅https://github.com/masa67/NgTable了解工作示例(基于Node)。我没有改变任何东西(填充缺失的部分,可能问题就在那里)。

表格格式不正确,但至少有数据进入。