ngTable排序和搜索时使用$资源

Question

我开始用ngTable的现有例的修改有点用ngResource不工作。使用资源工厂它填充数据，但搜索和排序不起作用。

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

创建上方的笔。

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

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

Answer 2

您的线路

var ordersGet = orderResource.query({ }); 

是您ordersGet变量清理出的query命令。所以，当你做

回报ordersGet.$promise.then心不是一个真正的AJAX调用发生。没有什么是真的。 ngTable调用你的ordersGet，但由于query命令是什么都没有，它什么都不做。

此外，如果您的某个ordersGet工作正常，您永远不会通过params.url()，因此分页无法工作。

在我看来有这样

1. 两种方式只需用

第2解决方案，并用它做

覆盖资源上的get网址，并将其称为与此类似的网址ordersGet(params.url()).$promise.then();这是m比较复杂，但这里有几条链接沿着这条路线走下去。

Great SO question on how to override resource URL

Answer 3

嗯，我想我已经解决了它 - 也许不是最干净的一个，但仍然...

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


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

我申请$过滤服务，我订购表通过该过滤器的结果（排序顺序我已经从组分具有）