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

时间:2016-12-19 20:35:35

标签: javascript angularjs angular-promise ngtable

我从

中获取了ngTable示例

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

在代码笔中打开它而不是“/ data”我正在使用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

2 个答案:

答案 0 :(得分:0)

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

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;

答案 1 :(得分:0)

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

也可以启用过滤器:)