ngtable: sắp xếp và lọc trên đối tượng lồng nhau

Question

Tôi có một danh sách các đối tượng để hiển thị trên bảng với ngTable. đối tượng của tôi trông giống như:

obj {label:string, 
    nestObj{nestLabel:string 
      } 
    } 

Trong điều khiển của tôi, tôi muốn cho phép sắp xếp và lọc trên các lĩnh vực 'nhãn' và 'nestObject.label'. Tôi đã cố gắng này:

$scope.tableParams = new ngTableParams({ 
     page: 1,   // show first page 
     count: 10, 
     filter: { 
      label='', 
      nestObj.label='' 
     }, 
     sorting: { 
      label: 'asc', 
      nestObj.label: 'asc' 
     } 
    }, { 
     total: data.length, // length of data 
     getData: function($defer, params) { 
      // use build-in angular filter 
      var filteredData = params.filter() ? 
      $filter('filter')(data, params.filter()) : 
      data; 
      var orderedData = params.sorting() ? 
        $filter('orderBy')(filteredData, params.orderBy()) : 
        data; 

      params.total(orderedData.length); // set total for recalc pagination 
      $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
    }   
}); 

Nhưng tôi đang nhận được một lỗi, trình biên dịch javascript không thích các bộ lọc trên nestObj.label:

Uncaugth syntexError: dấu hiệu bất ngờ.

CNTT hoạt động tốt nếu tôi không lọc và sắp xếp trên nestObj.label.

Có thể lọc và sắp xếp trên lồng đối tượng với ngTable?

Đây là plunker đó minh họa cho vấn đề.

Cảm ơn bạn.

Answer 1

Thật không may, lọc và phân loại với các đối tượng lồng nhau là không phù hợp trong ng-bảng cho bây giờ. Đọc số post và giải pháp này từ @Kostia Mololkin, cuối cùng tôi đã biết cách tránh lỗi này và giải pháp cuối cùng rất đơn giản. Cảm ơn anh ấy!

tôi chỉ viết lại những mảng đâu là dữ liệu của bạn: khởi tạo tài sản mới và thiết lập các dữ liệu từ đối tượng lồng nhau vào các tài sản mới như:

for (var i = 0; i < data.length; i++) { 
    data[i].town = ""; //initialization of new property 
    data[i].town = data[i].adresse.town; //set the data from nested obj into new property 
} 

Bạn có thể thấy giải pháp này ở đây trên plunker, bây giờ nó làm việc như một nét duyên dáng ...

Answer 2

Chỉ cần thêm hai xu của tôi như tôi đi qua, đừng ngại tận dụng chức năng lập trình. Làm phẳng dữ liệu đơn giản và theo ý kiến ​​của tôi sạch như vậy:

var flattenedArray = dataArray.map(function(obj) { 
    return { 
     label: obj.label, 
     nestedLabel: dataItem.nestedObj.nestedLabel 
    }; 
}); 

Sau đó, bạn có thể sắp xếp theo label và nestedLabel trong ngTable một cách dễ dàng.

Lưu ý: Tôi nhận ra chúng tôi đang làm bản sao ở đây để một chút bộ nhớ hơn là tiêu thụ.

Answer 3

Đây là phương pháp getData để hỗ trợ các tham số lồng nhau và hỗ trợ bổ sung cho đặt hàng và phân trang. Cần phải tiêm $filter và đổi tên myData bằng mảng dữ liệu của riêng bạn. Hy vọng nó có thể giúp đỡ.

$scope.tableParams = new NgTableParams({}, 
{ 
    getData: function($defer, params) { 

     // organize filter as $filter understand it (graph object) 
     var filters = {}; 
     angular.forEach(params.filter(), function(val,key){ 
      var filter = filters; 
      var parts = key.split('.'); 
      for (var i=0;i<parts.length;i++){ 
       if (i!=parts.length-1) { 
        filter[parts[i]] = {}; 
        filter = filter[parts[i]]; 
       } 
       else { 
        filter[parts[i]] = val; 
       } 
      } 
     }) 

     // filter with $filter (don't forget to inject it) 
     var filteredDatas = 
      params.filter() ? 
       $filter('filter')(myDatas, filters) : 
       myDatas; 

     // ordering 
     var sorting = params.sorting(); 
     var key = sorting ? Object.keys(sorting)[0] : null; 
     var orderedDatas = sorting ? $filter('orderBy')(filteredDatas, key, sorting[key] == 'desc') : filteredDatas; 

     // get for the wanted subset 
     var splitedDatas = 
      orderedDatas.slice((params.page() - 1) * params.count(), 
       params.page() * params.count()); 

     params.total(splitedDatas.length); 

     // resolve the ngTable promise 
     $defer.resolve(splitedDatas); 
    } 
});