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