Question

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

在上方创建了一支笔。

＆＃13;

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 ***
              
              
                });
            }
        });
    }
})();

＆＃13;

<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>

＆＃13;

在代码中，如果您评论第1部分和取消评论部分2，您可以观察它是否有效。我也试过简单的$ http它也没有用。

Answer 1

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

  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服务，我通过这个过滤器排序表格结果（我已从组件中排序）

Answer 2

你的行

 var ordersGet = orderResource.query({ });

正在清除query变量的ordersGet命令。所以当你这样做时

返回ordersGet.$promise.then确实没有发生ajax调用。什么都没有发生。 ngTable会调用您的ordersGet，但由于query命令无效，因此无效。

此外，如果你ordersGet的某些工作方式有效，你就永远不会通过params.url()，所以分页永远不会有效。

在我看来，有两种方法可以做到这一点

只需使用您的

第2节解决方案并完成它

覆盖资源上的get网址，并将其称为类似于此ordersGet(params.url()).$promise.then();这更复杂，但这里有一些链接可以沿着这条路线前进。

Great SO question on how to override resource URL

Answer 3

Angular Table sorting does not work if i use a different api

我问了同样的问题在哪里得到了更好的答案。

首先，我们错过了过滤。

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

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

工作代码笔在这里

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

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

3 个答案: