【问题标题】:AngularJS ngTable doesn't workAngularJS ngTable 不起作用
【发布时间】: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


    【解决方案1】:

    据我所知,您的代码有效。

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

    表格格式不正确,但至少数据进来了。

    【讨论】:

    • 感谢您的暗示!当您说表格格式不正确时,您在说什么?从视图来看,我设法尝试使用引号换行、数据或 $data 作为要获取的对象、修改 ng-table 名称等......我的表是创建的,因为我的过滤器输入区域和排序机制是在页面加载时创建的。但数据没有进来
    • 格式问题可能只存在于我的示例代码中。如果需要,我可以稍后再看。关键是你的代码对我有用,所以问题肯定出在你上面问题描述中的代码之外的地方。
    • 我删除了一些我通过员工查询方法发送的参数,并且内容被正确列出。但是,我无法排序或过滤。而且我需要这些参数来对服务器端进行分页,所以这不是解决方案。我会继续挖掘。
    • 我回到了这个主题。是否有可能在每个过滤器/排序时使用初始值重新创建我的 ngTable?但它不应该适用于你的例子...... mhh
    • 排序和过滤也是我的示例中的问题。抱歉,我想不通,为什么它不起作用。
    猜你喜欢
    • 1970-01-01
    • 2014-12-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-16
    • 1970-01-01
    • 1970-01-01
    • 2014-04-21
    相关资源
    最近更新 更多