Sắp xếp và tìm kiếm ng-Bảng không hoạt động khi sử dụng $ resource

Question

tôi bắt đầu với một ví dụ hiện tại về ngTable đã sửa đổi nó một chút để sử dụng ngResource. sử dụng nhà máy tài nguyên, nó điền dữ liệu nhưng tìm kiếm và sắp xếp không hoạt động.

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

Tạo bút ở trên.

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>

Trong mã nếu bạn nhận xét phần 1 và bình luận un phần 2 bạn có thể quan sát nó làm việc. tôi cũng đã thử đơn giản $ http nó đã không làm việc là tốt.

Answer 1

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

Tôi hỏi cùng một câu hỏi khác ở đâu và có câu trả lời tốt hơn.

Điều đầu tiên là chúng tôi thiếu bộ lọc.

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

và để thực hiện công việc sắp xếp, chúng tôi phải thêm một số logic để loại bỏ thuộc tính với giá trị bộ lọc rỗng.

làm việc đang bút là ở đây

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

Answer 2

Đường dây của bạn

var ordersGet = orderResource.query({ }); 

Được giải phóng ra lệnh query cho biến ordersGet của bạn. Vì vậy, khi bạn làm

trả lại ordersGet.$promise.then không thực sự là cuộc gọi ajax đang diễn ra. Không có gì thực sự xảy ra. ngTable gọi ordersGet của bạn nhưng vì lệnh query là không có gì, nó không có gì.

ngoài ra, nếu một số cách ordersGet của bạn hoạt động, bạn không bao giờ vượt qua params.url() để phân trang sẽ không bao giờ hoạt động.

Theo tôi có hai cách để làm điều này

1. chỉ cần sử dụng giải pháp của bạn

Phần 2 và được thực hiện với nó

2. Ghi đè URL get trên tài nguyên của bạn và gọi nó là tương tự với số ordersGet(params.url()).$promise.then(); đó là m uch phức tạp hơn, nhưng đây là một vài liên kết để đi xuống con đường đó.

Great SO question on how to override resource URL

Answer 3

Vâng, tôi nghĩ rằng tôi đã giải quyết nó - có lẽ không phải là người sạch nhất nhưng vẫn ...

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


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

tôi đã áp dụng dịch vụ lọc $ và tôi ra lệnh cho bảng kết quả của bộ lọc này (thứ tự sắp xếp mà tôi đã có từ thành phần)