Come aggiornare NG-Table caricato da una richiesta http con dati dinamici

Question

Devo essere in grado di aggiornare i dati nella mia tabella ng. Le seguenti immagini contengono lo scenario del caso di utilizzo completo. Quando un utente fa clic la ricerca di brandid, una nuova finestra modale apears:

contiene un ng-tabella con alcuni dati caricati in esso. Dopo aver rimosso la modal clicco sulla seconda ricerca (GroupID), qui viene aperta la stessa finestra modale con una tabella ng ma anche se la richiesta è ok e i dati vengono restituiti dal server, il caricamento non riesce:

Vorrei poter aggiornare la tabella per inizializzarla con i dati appena ricevuti.

Lo script in Plunker viene chiamato ogni volta che si attiva/disattiva la modalità.

Answer 1

La soluzione al problema è disponibile here. Non è una buona soluzione, ma per ora è il migliore. Forzando un conteggio diverso per ogni richiesta, la tabella ricarica i suoi dati e otterrai il risultato desiderato. Il nuovo Plunk può essere trovato here Si prega di notare l'importanza di avere un conteggio diverso per pagina per ogni richiesta. Se la proprietà count è impostata sullo stesso numero, la soluzione fallirà. Spero che questo rende chiaro, e spero anche che gli sviluppatori di NG-table risolverà questo problema

Answer 2

Provate a aggiornare i dati della tabella:

$scope.tableParams.reload(); 

Edit: Ho trovato un possibile bug nel codice ... Credo che si dovrebbe cambiare questo:

var orderedData = params.sorting() ? 
    $filter('orderBy')(filteredData, params.orderBy()) : 
    $scope.datay; 

a questo:

var orderedData = params.sorting() ? 
    $filter('orderBy')(filteredData, params.orderBy()) : 
    filteredData; 

Funziona meglio?

Answer 3

Questo codice di esempio sembra funzionare, si prega di controllare questo SO domanda per ulteriori spiegazioni: ng-table not working for dynamic data

// Get data from factory 
var data = dataFactory.query(); 

//Use promise to load data to table, note the replacing of the second tableParams 
//object parameter with a function 
data.$promise.then(function (data){ 
    $scope.tableParams = new ngTableParams({ 
     page: 1,   // show first page 
     count: 10, 
     sorting: { 
      name: 'asc' 
     }, 
     filter: { 
      name: undefined    
     } 
    }, resetTableParams() 
    ); 
}); 

//The function that replaces the tableParams param 
var resetTableParams = function(){ 
    return { 
     total: data.length, 
     getData: function($defer, params) { 
      var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data; 
     var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData; 

     params.total(orderedData.length); 
     $defer.resolve($scope.data = orderedData.slice((params.page() -1) * params.count(), params.page() * params.count()));   
     } 
    } 
} 

//A method to update the table that can be called when closing a modal 
var updateTable = function(){ 
    data = dataFactory.query(); 
    data.$promise.then(function (data){ 
     $scope.tableParams.reload(); 
    }); 
} 

// Add table row to table in modal and call updateTable() on closing modal 
$scope.addRow = function(){ 
    var modalInstance = $modal.open({ 
     templateUrl: 'resources/partials/newrecord.html', 
     controller: NewRecordModalCtrl 
    }) 

    modalInstance.result.then(function(){ 
     updateTable(); 
    }); 
} 

Answer 4

Gente, ora supporto questo repo e finalmente il problema è stato risolto in v0.4.2!