ngtable: ordina e filtra sull'oggetto nidificato

Question

Ho una lista di oggetti da visualizzare su una tabella con ngTable. mio oggetto assomiglia:

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

Nel mio controller voglio permettere di ordinamento e filtro sui campi 'label' e 'nestObject.label'. Ho provato questo:

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

Ma io sto ottenendo un errore, il compilatore JavaScript non piace il filtro nestObj.label:

Uncaugth syntexError: token imprevisto.

Funziona bene se non filtro e non ordinamento su nestObj.label.

È possibile filtrare e ordinare l'oggetto nidificato con ngTable?

Ecco il numero plunker che illustra il problema.

Grazie.

Answer 1

Sfortunatamente, il filtraggio e l'ordinamento con oggetti nidificati non è adatto in ng-table per ora. Leggendo questo post e la soluzione da @Kostia Mololkin, ho finalmente capito come evitare questo bug e alla fine la soluzione è molto semplice. Grazie mille a lui!

Ho appena riscritto la matrice in cui è i vostri dati: inizializzato la nuova proprietà e impostare i dati oggetto nidificato nella nuova proprietà come:

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 
} 

Potete vedere questa soluzione qui in plunker, ora è il funziona come un fascino ...

Answer 2

Semplicemente aggiungendo i miei due centesimi come mi sono imbattuto, non abbiate paura di fare uso di programmazione funzionale. Appiattimento dei dati è semplice e, a mio parere più pulita in questo modo:

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

Quindi è possibile ordinare in base label e nestedLabel in ngTable con facilità.

Nota: mi rendo conto che stiamo facendo delle copie qui in modo da consumare un po 'più di memoria.

Answer 3

Ecco un metodo getData per supportare parametri nidificati e supporto aggiuntivo per l'ordinazione e il paging. È necessario iniettare $filter e rinominare myData con la propria serie di dati. Spero che possa aiutare.

$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); 
    } 
});