ng-table ne fonctionne pas pour la dynamique de données

Avec quelques tâtonnements, j'ai trouvé un semblant de solution la mieux adaptée à la question qu'indiqué dans la plunkrs. Pour plus de clarté, je suis en utilisant $ressource dans un service pour récupérer mes données. Quand j'ai ajouter un enregistrement par l'intermédiaire d'un modal, à première vue, il ne serait pas en mesure de télécharger le ng-table après la fermeture de la modale. J'ai trouvé un moyen qui fonctionne pour moi:

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

Malheureusement, je ne peux pas donner une explication claire des raisons pour expliquer pourquoi cela fonctionne et d'autres méthodes ne le sont pas. Par exemple, si vous n'utilisez pas la resetTableparams (), fonction mais le laisser codé en dur, la table n'est pas mise à jour. En quelque sorte, Angulaire s digest cycle aime mieux 🙂 Si quelqu'un a une bonne explication, merci de partager!

OriginalL'auteur jvdp

Je ne suis pas sûr de la cause exacte de la mauvaise incrémentation, mais le problème, c'est peut-être plus en raison de l'approche. Vous devez joindre le comte de la portée par $scope.count, et ensuite utiliser le ng-click directive de l'incrémenter: <button type="button" ng-click="count++;".

Il serait aussi plus facile pour vous/pour les autres à lire et à déboguer si vous externalisé la $scope.tableParams et les données de $scope.table1 conditionnelle chose:

$scope.count = 0;
var dataCollections = [
[//.. first collection],
[//.. second collection],
[//.. third collection],
[//.. fourth collection]
];
$scope.data = dataCollections[0];
$scope.$watch('count', function () {
$scope.data = $scope.count < 4 ? dataCollections[$scope.count] : dataCollections[3];
});

Je suis également pas sûr de ce que vous avez obtenu avec le $compile à l'intérieur du contrôleur. Il peut rendre votre tâche plus facile si vous examiné certaines choses à propos de l'écriture Angulaire contrôleurs avant de se plonger dans l'utilisation d'un module tiers.

OriginalL'auteur user128268

Pour résoudre le problème, assurez-vous que vous avez réglé la ng-controller="yourController" qu'une seule fois dans votre page.

Code ci-dessous ne sera pas de mise à jour des données:

<div ng-controller="yourController">
<table ng-table = "tableParams" ng-controller = "yourController">
</table>
</div>

Résoudre le problème en supprimant supplémentaire ng-controller dans votre page html:

<div ng-controller="yourController">
<table ng-table = "tableParams">
</table>
</div>

OriginalL'auteur mac13v