ng-Table 使用 $resource 时排序和搜索不起作用

Question

我从现有的 ngTable 示例开始，对其进行了一些修改以使用 ngResource。使用资源工厂填充数据但搜索和排序不起作用。

在上面创建了一支笔。

var app = angular.module("myApp", ["ngTable", "ngResource", "ngTableDemoFakeBackend"]);

app.factory('orderResource', function ($resource) {
    return $resource('https://jsonplaceholder.typicode.com/posts');
});

(function () {

    app.controller("demoController", demoController);
    demoController.$inject = ["NgTableParams", "$resource", "orderResource"];
    function demoController(NgTableParams, $resource, orderResource) {
        //debugger;
        var ordersGet = orderResource.query({ });


        var Api = $resource("/data");
        this.tableParams = new NgTableParams({}, {
            getData: function (params) {

                // **** Section 1 ***  sorting and filter does not work
                    return ordersGet.$promise.then(function (response) {
                    params.total(100);
                    return response;
              // **** Section 1 *** 
              
              
                //****Section 2 *** this works fine
                    // return Api.get(params.url()).$promise.then(function(data) {
                    //           params.total(data.inlineCount);  
                    //           return data.results;
              //****Section 2 ***
              
              
                });
            }
        });
    }
})();

<div ng-app="myApp">
    <div ng-controller="demoController as demo">



        <table ng-table="demo.tableParams" class="table table-bordered table-striped table-condensed">
            <tr ng-repeat="row in $data track by row.id">
                <td data-title="'iss'" filter="{id: 'number'}" sortable="'id'">{{row.id}}</td>

            </tr>
        </table>
    </div>
</div>

在代码中，如果您注释第 1 节并取消注释第 2 节，您可以观察到它正在运行。我也尝试了简单的 $http，但效果不佳。

Answer 1

你的线路

 var ordersGet = orderResource.query({ });

正在为您的 ordersGet 变量清除 query 命令。所以当你做

return ordersGet.$promise.then 并没有真正发生 ajax 呼叫。什么都没有发生。 ngTable 调用您的 ordersGet 但由于 query 命令什么也没有，所以它什么也不做。

此外，如果您的 ordersGet 是如何工作的，那么您永远不会通过 params.url()，因此分页将永远无法工作。

我认为有两种方法可以做到这一点

只需使用您的

Section 2 solution and be done with it

覆盖您资源上的 get URL 并像这样调用它 ordersGet(params.url()).$promise.then(); 这要复杂得多，但这里有一些链接可以沿着这条路走下去。

Great SO question on how to override resource URL

Answer 2

嗯，我想我已经解决了 - 可能不是最干净的，但仍然...

  var app = angular.module("myApp", ["ngTable", "ngResource", "ngTableDemoFakeBackend"]);

app.factory('orderResource', function ($resource) {
return $resource('https://jsonplaceholder.typicode.com/posts');
});

(function () {

app.controller("demoController", demoController);
demoController.$inject = ["NgTableParams", "$resource", "orderResource", '$filter'];
function demoController(NgTableParams, $resource, orderResource, $filter) {
    //debugger;
    var ordersGet = orderResource;


    var Api = $resource("/data");
    this.tableParams = new NgTableParams({}, {
        getData: function (params) {
            // **** Section 1 ***  sorting and filter does not work
                return orderResource.query().$promise.then(function (response) {
                params.total(100);

                return $filter('orderBy')($filter('filter')(response, params.filter()), params.orderBy())
          // **** Section 1 ***    

            //****Section 2 *** this works fine
                // return Api.get(params.url()).$promise.then(function(data) {
                //           params.total(data.inlineCount);  
                //           return data.results;
          //****Section 2 ***


            });
        }
    });
}
})();

我已经应用了 $filter 服务，我正在通过这个过滤器排序 table 结果（我已经从组件中得到的排序顺序）

Answer 3

我在其他地方问过同样的问题并得到了更好的答案。

首先，我们缺少过滤。

return $filter('filter')($filter('orderBy')(data, params.orderBy()),params.filter());

为了进行排序，我们必须添加一些逻辑来删除过滤值为空的属性。

工作码笔来了

http://codepen.io/anon/pen/rWRNjQ

ng-Table 使用 $resource 时排序和搜索不起作用

ng-Table sorting and searching not working when use $resource

javascript

angularjs

angular-resource

ngtable