Filtre personnalisé avec AngularJS ngTable
Je suis en train de construire un tableau à l'aide de ngTable, mais avec différents filtrage personnalisé que décrit dans l'exemple de la page ngTable.
Je veux filtrage en place, mais je ne veux pas ngTable pour rendre le sélecteur de filtre. Je veux rendre moi-même (au-dessus de la table), puis de référence dans le cadre de mon "getData()" la méthode.
L'exemple mentionné précédemment n'est pas d'expliquer comment tout cela fonctionne machines. Je n'ai aucune idée exactement ce qui doit être spécifié dans le "filtre" de la propriété dans chaque "td" de l'élément. Je comprends la syntaxe de base de la AngularJS $fonction de filtre, mais je ne suis pas clair sur ce que ngTable est en train de faire avec cela. De la un exemple, il semble que je ne peut le faire "est égal à" vérification, qui permettrait de sélectionner uniquement les lignes où la colonne associée de la valeur est égale à la valeur du filtre. Ce n'est pas tout à fait ce dont j'ai besoin.
Mon tableau comporte plusieurs colonnes. Deux d'entre eux sont appelés "clés" et "échec", string et boolean respectivement. Lorsque je me suis rendu à ces champs de filtre au-dessus de la table, j'ai besoin d'une étiquette personnalisée pour la "échec" du filtre. Le filtrage de la "clé" de la colonne doit correspondre à la valeur du filtre avec tout sous-chaîne de la "clé" des valeurs. Par exemple, si j'ai des valeurs de clé de "abc", "abac", et "def", un filtre de valeur de "a" sera dans les deux premières entrées montrer et ne pas montrer le "def".
Mise à jour:
Sur ce point, je souhaite que je pourrais trouver comment faire quelque chose comme ceci:
Disons que j'ai un ngRepeat expression dans mon élément de tableau comme ceci, à l'aide de "standard" angularjs filtres:
"item in $data | customfilter:param | anothercustomfilter:param"
Nous savons que ce n'est pas tout à fait, comme ces filtres ne s'appliquent à une page de tranche obtenue à partir de la "getData()" la méthode. Ce que je voudrais vraiment être en mesure de faire dans mon "getData()" la méthode est tout simplement d'accéder à l'ensemble de la chaîne de filtrage, y compris le paramètre expressions, et tout simplement passer un tableau différent en cela, l'ensemble de données d'origine de la liste, et pas seulement la page de la tranche.
En même temps, j'avais besoin d'être en mesure de "désactiver" le filtrage angularjs est en train de faire par lui-même, par l'exécution de cette chaîne de filtrage dans ses conditions normales de traitement.
Cela semble difficile, mais je trouve l'API actuelle exige beaucoup de couplage entre le html et le javascript. Ce serait bien si le code html peut spécifier le filtrage, ainsi que le code javascript utilisé seulement à l'intégralité de la chaîne de filtre, mais de l'utiliser sur l'ensemble de la liste de données, et pas seulement la page de la tranche.
Mise à jour:
Voici un extrait de mon code HTML:
<label for="keysFilter">Filter Keys:</label>
<input id="keysFilter" type="text" ng-model="keysFilter"/>
<label for="showOnlyFailed">Show only queries that failed?</label>
<input id="showOnlyFailed" type="checkbox" ng-model="showOnlyFailed"/>
<table ng-table="tableParams" table-pagination="custom/pages" class="table">
<tr ng-repeat="queryInfo in $data"> <!-- | filterFailed:showOnlyFailed | filterMatchingKeys:keysFilter -->
Voici mon tableParams code:
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: {
lastRun: 'desc'
}
},
{
debugMode: true,
total: $scope.completedQueries.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.completedQueries, params.orderBy()) :
data;
orderedData = $filter('filterFailed')(orderedData, $scope.showOnlyFailed);
orderedData = $filter('filterMatchingKeys')(orderedData, $scope.keysFilter);
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(),
params.page() * params.count()));
}
});
Notez que j'ai utilisé ont cette ngTable ne pas utiliser le "$" données de la liste, et seulement une itération à travers mon "completedQueries" liste. Quand il travaillait, la liste serait immédiatement changer quand j'ai cliqué sur "Afficher uniquement les requêtes qui ont échoué à la" case à cocher, ou le texte entré dans le "keysFilter" champ de saisie.
Cependant, maintenant que je suis en utilisant le "$" données de la liste, rien ne se passe lorsque je modifie l'un de ces champs. En fait, j'ai même ajouté $watch-es pour les deux de ces champs, et aucun d'eux le feu. Cependant, quand je fais des modifications à l'un de ces champs, je sais que la table de données est en train d'être réévalué, car deux des colonnes de données qui devraient être millis valeur, et j'ai un filtre personnalisé sur ces colonnes, qui traduisent la valeur d'un "temps tôt" expression anglaise, à l'instar de "30 secondes auparavant", ou "2 minutes", et à chaque fois que je change un de ces champs de saisie, je vois ces expressions dans le tableau de changement, mais il n'est toujours pas en faire un filtrage adéquat.
Si c'est important, voici les $regarder es-ce que j'ai ajouté à ma portée. Ces n'apparaissent jamais au feu:
$scope.$watch("showOnlyFailed", function() {
$scope.tableParams.reload();
});
$scope.$watch("keysFilter", function() {
$scope.tableParams.reload();
});
Remarque que lorsque je les ai commenté, je vois le message d'erreur suivant après que j'ai frappé mon "getData()" méthode:
Error: settings.$scope is null @http://localhost:8000/js/diag/libs/ng-table.src.js:411 qFactory/defer/deferred.promise.then/wrappedCallback@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11046 qFactory/ref/<.then/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11132 Scope.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:12075 Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11903 Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:12179 bootstrap/doBootstrap/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1341 invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:3762 bootstrap/doBootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1340 bootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1353 angularInit@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1301 @http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:21048 n.Callbacks/j@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 n.Callbacks/k.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 K@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js Line 9509
C'est le bloc de code:
$defer.promise.then(function (data) {
settings.$loading = false;
log('ngTable: current scope', settings.$scope);
if (settings.groupBy) {
self.data = settings.$scope.$groups = data;
} else {
self.data = settings.$scope.$data = data; //line 411
}
settings.$scope.pages = self.generatePagesArray(self.page(), self.total(), self.count());
});
Mise à jour:
Voici mon plunkr qui démontre que le fait de changer le filtre externe champs ne fonctionne pas. J'ai également deux $watch-es en commentaire pour tenter de remédier à cela. Quand j'ai des commentaires de ceux, j'obtiens une erreur au sein de ng-table, se plaignant d'une étendue nulle.
Mise à jour:
J'ai essayé d'ajouter le "newvalue, oldvalue" paramètres de mon $watch-es (j'ai mis à jour le plunkr). Maintenant, les changements dans les champs sont à l'origine de la table à mettre à jour. Malheureusement, je reçois encore que la trace de la pile sur la ligne 411 de ng-table.
source d'informationauteur David M. Karr
Vous devez vous connecter pour publier un commentaire.
Il semble que vous rencontrez un problème avec
ng-table
lui-même, qui est une 3ème partie de la bibliothèque qui n'est pas vraiment bien pris en charge.Comme preuve de cela, consultez leur page Github, qui a plus de 200 questions ouvertes et 1 200 étoiles (1:6):
https://github.com/esvit/ng-table
Comparez cela à une bibliothèque comme
D3.js
qui bénéficie du plein soutien technique et financier du New York Times. Il dispose de 150 questions et plus de 30 000 étoiles (1:200).https://github.com/mbostock/d3
Grand nombre de questions ouvertes signifie que les gens sont de trouver des bugs plus rapidement que les développeurs peuvent les résoudre. Plus que probablement, les développeurs ont probablement déménagé vers de nouveaux projets et ne sont plus intéressés par le maintien de cette bibliothèque.
En d'autres termes, vous avez une limitation de fonctionnalité de la bibliothèque elle-même. Lorsque cela se produit, vous avez deux options,
1. Cesser l'utilisation de la bibliothèque, puis sélectionnez une nouvelle bibliothèque, ou créer votre propre.
Malheureusement j'ai regardé cette question et il n'est pas vraiment une bonne angulaire de la table de la bibliothèque de droit maintenant
2. Fourche le référentiel, d'apprendre le fonctionnement interne de la bibliothèque, de mettre en œuvre la fonction que vous voulez vous-même, et de faire une pull request.
Juste si ce n'est pas une totale déception, peut-être
UI-Grid
peut vous aider oùng-table
a échoué.http://ui-grid.info/
Divulgation: je ne suis pas affilié avec l'interface utilisateur de la grille et je suis encore très indécis quant à savoir si elle est encore bonne
Dans notre situation, nous avons utilisé ng-tableau dynamique pour nous de disposer d'un ensemble de colonnes personnalisées des colonnes doit être la carte sur la liste des utilisateurs de la base de données au niveau du code. Depuis la cartographie manuelle qui se passe au niveau du code, nous trouvons une façon unique de manipulation de filtrage et de tri avec ng-table-dynamique.
Voici le code
Note: Nous avons utilisé une variable déclarée résultats, où il contient les données pour être rendus à la table.
Également dans le contrôleur, nous avons besoin de gérer la recherche personnalisée
voici le code:
Ce code permet de déclencher la fonction getData de NgTableParams, vous permettant de construire votre filtre personnalisé.
Remarque: Vous devez également conserver le résultat de la matrice de sorte que vous besoin de stocker dans $portée variable
Code ressemblera à ceci