【发布时间】:2016-02-23 03:53:16
【问题描述】:
我之前已经使用 ngTable 处理静态数据,它运行良好(列表、排序和过滤)。我正在使用 ngTable v 0.8.3
我的目标
这次我想用从 Web 服务加载的数据创建一个 ngTable。 我创建了一个自定义工厂,以便能够与未来的其他实体一起创建我的 ngTable。
问题
它不起作用,我没有 JS 控制台错误。当我调试时,我可以清楚地看到来自我的服务 Employee 的方法查询返回给我完整且正确的包含员工详细信息的对象。我进入 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,进度:
如果我从查询方法中删除参数,我的项目就会被列出,因此我的员工服务处理不当。但是,默认情况下,排序和过滤器不适用于我的表。为了使排序工作,我必须在我的 ngTable 工厂的 getData() 函数中添加这一行:
result = $filter('orderBy')(result, params.orderBy());
通常,当我在我的 HTML ngtable 模板列中添加“可排序”关键字时,基本元素的排序工作,并且当我通过 $data 项获取我的数据时。仍在调查中。
感谢您的帮助伙伴!
【问题讨论】:
标签: angularjs web-services factory ngtable