J'essaie de construire une table à l'aide de NgTable, mais avec un filtrage personnalisé différent de celui décrit dans L'exemple de la page ngtable .
Je veux filtrer en place, mais je ne veux pas que la ngtable rendit les sélecteurs de filtres. Je veux les rendre moi-même (au-dessus de la table), puis les référencez-les dans ma méthode "getdata ()". P>
L'exemple mentionné à l'adresse précédente n'explique pas comment aucune de ces machines fonctionne. Je n'ai aucune idée exactement ce qui doit être spécifié dans la propriété "Filtre" dans chaque élément "TD". Je comprends la syntaxe de base de la fonction de filtre $ $ $, mais je ne suis pas clair sur ce que la ngtable fait avec cela. À partir de l'exemple, il semble que je ne puisse faire que "égal à" la vérification, qui ne sélectionnerait que des lignes où la valeur de colonne associée est égale à la valeur du filtre. Ce n'est pas tout à fait ce dont j'ai besoin. P>
Ma table a plusieurs colonnes. Deux d'entre eux s'appellent "Key" et "Échec", être une chaîne et une booléenne respectivement. Lorsque vous rendant ces champs de filtrage au-dessus de la table, j'ai besoin d'une étiquette personnalisée pour le filtre "Échec". Filtrage pour la colonne "Touche" doit correspondre à la valeur du filtre avec toute sous-chaîne des valeurs "Clé". Par exemple, si j'ai des valeurs clés de "ABC", "ABAC" et "DEF", une valeur de filtre de "A" entraînera les deux premières entrées montrant et ne montrant pas l'entrée "def". P " >
en relation avec cela, j'aimerais pouvoir comprendre comment faire quelque chose comme ceci: P> Disons que j'ai un ngrépeat expression dans mon élément de table comme ceci, en utilisant des filtres angulaires "standard" angularjs: p> Dans le même temps, je devrais pouvoir "désactiver" le filtrage angularjs se débrouille en soi, en exécutant cette chaîne de filtrage dans son traitement normal. P> Cela semble difficile, mais je trouve que l'API actuel nécessite beaucoup de couplage entre le HTML et le JavaScript. Ce serait bien que le HTML puisse spécifier le filtrage souhaité, et le JavaScript n'utiliserait que toute la chaîne de filtrage entière, mais utilisez-la sur toute la liste de données, pas seulement la tranche de page. P> Mise à jour : strong> p> Voici un extrait pertinent de mon HTML: p> voici mon code de table: p> Notez que j'ai utilisé cette ngtable n'utilise pas la liste "$ Data", et simplement iterating via ma liste "Toujours -Qui". Lorsque cela a fonctionné comme ça, la liste changerait immédiatement lorsque j'ai cliqué sur la case "Afficher uniquement les requêtes qui ont échoué" Cochez la case "Afficher uniquement le texte dans le champ de saisie" Keysfilter ". P> Cependant, maintenant que je suis Utilisation de la liste "$ données", rien ne se passe lorsque je change de ces champs. En fait, j'ai même ajouté $ Watch-es pour ces deux domaines, et aucun d'entre eux incendie. Cependant, lorsque je modifie l'un de ces champs, je connais que les données de la table sont en cours de réévaluation, car deux des colonnes ont des données qui devraient être une valeur Millis, et j'ai un filtre personnalisé sur ces colonnes qui traduisent la valeur à la valeur. une expression anglaise "il y a longtemps", comme "30 secondes il y a", ou "il y a 2 minutes", et chaque fois que je change l'un de ces champs de saisie, je vois ces expressions dans le changement de table, mais cela ne fait toujours pas le Filtrage correct. P> Si cela importe, voici les veilleurs $ que j'ai ajoutés à ma portée. Ceux-ci ne semblent jamais tirer: p> Notez que lorsque j'ai ces commentaires, je vois l'erreur suivante après avoir frappé ma méthode "getdata ()": p>
$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());
});
3 Réponses :
On dirait que vous ressentez un problème avec La preuve de cela, consultez leur page GitHub, qui compte plus de 200 problèmes ouverts et 1 200 étoiles (1: 6): P>
https://github.com/esvit/ng-table p>
Comparez ceci à une bibliothèque comme https://github.com/mbostock/d3 p>
Un grand nombre de problèmes ouverts signifie que les personnes trouvent des bugs plus rapidement que les développeurs ne peuvent les résoudre. Plus que probablement, les développeurs ont probablement passé de nouveaux projets et ne sont plus intéressés par le maintien de cette bibliothèque. P>
En d'autres termes, Vous avez rencontré une limitation de fonctionnalité de la bibliothèque elle-même forte>. Lorsque cela se produit, vous avez deux options, p>
Malheureusement, j'ai regardé cela et il n'y a pas une très bonne bibliothèque de table angulaire en ce moment em> p>
Il ne s'agit que d'une bummer totale, peut-être DIVULGATION: Je ne suis pas affilié à l'UI-Grid et je suis toujours à peu près sur la clôture de savoir s'il est même bon em> p> NG-TABLE CODE>, qui est une bibliothèque tierce qui n'est pas vraiment bien prise en charge. P>
d3.js code>, qui bénéficie du soutien technique et financier complet du New York Times. Il a 150 numéros et sur les étoiles 30 000 em> (1: 200). P>
1. Arrêtez d'utiliser la bibliothèque et sélectionnez une nouvelle bibliothèque ou construisez votre propre. H2>
2. Fourche le référentiel, apprenez les travaux internes de la bibliothèque, implémentez la fonctionnalité que vous souhaitez vous-même et de faire une demande de traction. H2>
ui-grille code> peut vous aider où
ng-table code> a échoué. p>
Je suis l'un des auteurs de l'UI-Grid et je suis aussi sur la clôture :) Cela va de mieux mieux, cependant. Juste pour jouer à l'avocat du diable, il est difficile de corréler le nombre de problèmes ouverts avec la qualité. Angular elle-même a plus de 800 problèmes ouverts actuellement. Le déséquilibre est entre l'utilisation de la communauté et la taille de l'équipe d'administration / développement; Il y a juste trop d'utilisateurs pour l'équipe à suivre.
Il est vrai que cela ne corrélait pas à la qualité, mais un grand nombre de problèmes ouverts dans un représentant indique que la bibliothèque a des problèmes de santé (et des lots angulaires.)
Vous n'avez pas besoin des montres ni des filtres personnalisés que vous avez créés. En réalité, le filtre «filtre» de l'angulaire est assez puissant.
Il vous suffit de créer un objet qui garde une piste de vos valeurs de filtrage avec des membres correspondant à vos champs d'articles. Quelque chose comme ça. P> alors vous pouvez le revenir à l'intérieur du p> getdata code> rappel à l'aide de
param.filter () code>.
J'ai mis à jour votre Plunker ici . Vous pouvez également vérifier l'échantillon ci-dessous: p>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
<label for="keysFilter">Filter Keys:</label>
<input id="keysFilter" type="text" ng-model="filter.key"/>
<label for="showOnlyFailed">Show only queries that failed?</label>
<input id="showOnlyFailed" type="checkbox" ng-model="filter.failed"/>
<br/>
<table ng-table="tableParams" class="table">
<tr ng-repeat="queryInfo in $data">
<td data-title="'Key'" sortable="'key'">{{queryInfo.key}}</td>
<td data-title="'Last Run'" sortable="'lastRun'">{{queryInfo.lastRun}}</td>
<td data-title="'Last Successful Run'" sortable="'lastSuccessfulRun'">{{queryInfo.lastSuccessfulRun}}</td>
<td data-title="'Elapsed Time'" sortable="'elapsedTime'">{{queryInfo.elapsedTime}} ms</td>
<td data-title="'Rows'" sortable="'rows'">{{queryInfo.rows}}</td>
<td data-title="'Failed'" sortable="'failed'">{{queryInfo.failed}}</td>
<td data-title="''"><button class="btn">Detail</button></td>
</tr>
</table>
<div>
Pouvez-vous s'il vous plaît regarder mon filtre ngtable problème ici ?
Dans notre situation, nous avons utilisé NG-Table-Dynamic pour que nous disposions d'un ensemble de colonnes personnalisées que ces colonnes personnalisées doivent être une carte sur la liste des utilisateurs de la base de données au niveau de code. Puisque la cartographie se produit manuellement dans le niveau de code, nous trouvons une manière unique de manipuler le filtrage et le tri avec NG-Table-Dynamic.
Voici le code P>
function foo() { Provider('Method', (error, users) => { if (!error) { this.usersList = users; this.$scope.userList.reload(); // cause render of results to the table this.$scope.$apply(); } }); }
J'essaie ta plunkr et ça marche comme un charme pour moi.
J'utilise Table intelligente peut vous aider.