如果我使用不同的 api，角度表排序不起作用答案

【问题标题】：Angular Table sorting does not work if i use a different api如果我使用不同的 api，角度表排序不起作用
【发布时间】：2016-12-19 20:35:35
【问题描述】：

我从

中拿了 ngTable 的例子

http://ng-table.com/#/loading/demo-external-array

在代码笔中打开它，而不是“/数据”，我使用的是 api

https://jsonplaceholder.typicode.com/posts

并添加了 isArray : true

  var Api = $resource("https://jsonplaceholder.typicode.com/posts", {}, {
    'get': { method: 'GET', isArray: true}
});

为了简单起见，我在 html 中取出所有列并保留“id”列

它会加载 id 列，但搜索排序不起作用。

我做错了什么？

换笔在这里

http://codepen.io/raasmasood/pen/zoeMgx

【问题讨论】：

我相信您的过滤器应该在您的上，因为这是重复创建表格行的项目
好的，让我检查一下
我累了。它没有用。我认为诺言有一些东西。我不知道到底是什么。

【解决方案1】：

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

你可以检查一下这个 codepen，现在它可以工作了。 ;)

getData: function(params) {
    // ajax request to api
    return Api.get(params.url()).$promise.then(function(data) {
     params.total(100); // recal. page nav controls
     return ($filter('orderBy')(data, params.orderBy()));
      //return data;
    });
  }

之前我们错过了过滤器部分。

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

也用于启用过滤器:)

【讨论】：

它很棒。排序工作。但是当我们清除它时过滤器不起作用。
我认为它与上面的答案中提到的问题相同。
这是一个棘手的codepen.io/anon/pen/rWRNjQ 这将完成工作。已更新函数 getData。
是的，我使用相同的概念来删除具有空值的属性，但您的代码更通用。非常感谢你

【解决方案2】：

我遇到了同样的问题，最终手动进行了排序/过滤/分页：

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

  app.controller("demoController", demoController);
  demoController.$inject = ["NgTableParams", "$resource", "$filter"];

  function demoController(NgTableParams, $resource, $filter) {
  //var Api = $resource("/data");
    var Api = $resource("https://jsonplaceholder.typicode.com/posts", {}, {
      // Let's make the `query()` method cancellable
      query: {method: 'get', isArray: true, cancellable: true}
    });        

    this.tableParams = new NgTableParams({      
      count: 5
    }, {

      getData: function(params) {
        // ajax request to api
        return Api.query().$promise.then(function(data) {

         params.total(data.length); // recal. page nav controls

          var filteredData = params.filter().id  ?
                      $filter('filter')(data, params.filter()) :
                         data;

          var orderedData = params.sorting() ?
              $filter('orderBy')(filteredData, params.orderBy()) : data;
          var page = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

          return page;
        });
      }
    });

  }
})();

这种方法的缺点是由于您正在使用过滤，添加的列越多，您需要做的检查就越多，因为它的工作方式是，当您清除过滤器时，它不会将该对象设置为未定义。它将创建一个像这样的对象：

{ id: null }

这意味着您不能在此行中使用params.filter()：

var filteredData = params.filter().id  ?
                  $filter('filter')(data, params.filter()) :
                     data;

【讨论】：

完全正确。我必须包括一个 $watch 才能让它工作。但仍在寻找无需手动操作的解决方案