Filtre sur mesure avec AngularJS ngTable

vous n'avez pas besoin des montres ni des filtres personnalisés que vous avez créés. Effectivement angulaire du "filtre" filtre est assez puissant.

vous avez juste besoin de créer un objet qui garde la trace de vos valeurs de filtre avec des membres qui correspondent à vos champs d'items. Quelque chose comme cela.

$scope.filter = {
    key: undefined,
    failed: undefined
}

alors vous pouvez le ramener à l'intérieur de la getData rappel à l'aide de params.filter(). J'ai mis à jour votre plunker ici. Vous pouvez également vérifier l'échantillon ci-dessous:

var app = angular.module('main', ['ngTable']);

app.controller('MainCtrl', function($scope, $http, $filter, ngTableParams) {

    $scope.completedQueries = [{"key":"abc000","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc001","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc002","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc003","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc004","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc005","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc006","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc007","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc008","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc009","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc010","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc011","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc012","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc013","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc014","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc015","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc016","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc017","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false}];
    $scope.filter = {
        key: undefined,
        failed: undefined
    };
    $scope.tableParams =  new ngTableParams({
        page: 1,
        count: 10,
        filter: $scope.filter
    }, {
        debugMode: true,
        total: $scope.completedQueries.length,
        getData: function($defer, params) {
            var orderedData = params.sorting() ? $filter('orderBy')($scope.completedQueries, params.orderBy()) : data;
            orderedData	= $filter('filter')(orderedData, params.filter());
            params.total(orderedData.length);
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});

<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>

on dirait que vous éprouvez un problème avec ng-table elle-même, qui est une bibliothèque tierce partie qui n'est pas vraiment bien prise en charge.

en guise de preuve, consultez leur page Github, qui compte plus de 200 numéros ouverts et 1200 étoiles (1: 6):

https://github.com/esvit/ng-table

comparez ceci à une bibliothèque comme D3.js, qui bénéficie du plein soutien technique et financier du New York Times. Il a 150 numéros et plus 30,000 étoiles (1:200).

https://github.com/mbostock/d3

un grand nombre de problèmes ouverts signifie que les gens trouvent des bogues plus rapidement que les développeurs peuvent les résoudre. Il est plus que probable que les développeurs se sont tournés vers de nouveaux projets et ne sont plus intéressés à entretenir 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. Arrêtez d'utiliser la bibliothèque et sélectionnez une nouvelle bibliothèque, ou construisez la vôtre.

malheureusement j'ai regardé dans ceci et il n'y a pas vraiment une bonne bibliothèque de table angulaire en ce moment

2. Dévier le dépôt, apprendre le fonctionnement interne de la bibliothèque, mettre en œuvre la fonctionnalité que vous voulez vous-même, et faire une demande pull.

ce n'est donc pas une totale déception, peut-être UI-Grid peut vous aider où ng-table a échouer.

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-table-dynamic pour avoir un ensemble de colonnes personnalisées ces colonnes personnalisées doit être map sur la liste des utilisateurs de la base de données au niveau du code. Puisque la cartographie se fait manuellement au niveau du code, nous trouvons une façon unique de gérer le filtrage et le tri avec ng-table-dynamic.

Voici le code

          function initialize() {
    this.$scope.userList = new this.NgTableParams({
          page: 1,
          count: 10
        }, {
          counts: [],
          total: this.usersList.length,
          getData: (params) => { // handles custom sorting or filtering
            var results= [];


            //add logic here if any
            results = this.$filter('filter')(results, this.$scope.searchKey);

            params.total(results.length);
            pages = Math.ceil(params.total()/ params.count());
            if(pages > 1){
              results = results.slice((params.page() - 1)* params.count(), params.page() * params.count());
            }
            return results;
          }
        });
    }

Note: Nous avons utilisé une variable déclarée résultats, où il contiendra les données à rendre à la table.

Également dans le contrôleur, nous avons besoin de gérer la recherche personnalisée

voici le code:

    this.$scope.$watch('searchKey',(newValue)=>{
          if(typeof newValue !== 'undefined'){
            this.$scope.userList.reload();// cause re-render of result in key-press
          }
    });

Ce code va déclencher la fonction getData de NgTableParams, vous permettant de construire votre filtre personnalisé.

Note: vous devez également préserver le tableau de résultats pour que vous ayez besoin de stocker dans la variable $ scope

Code ressemblera à ceci

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