web-dev-qa-db-fra.com

Filtre ui-grid Angularjs du champ de saisie de texte

Peut-être que quelqu'un peut m'aider avec un petit problème. Je suis assez nouveau dans le domaine de la programmation web, mais j'ai une expérience en programmation. Je voudrais développer un petit site Web qui utilise angularjs et ui-grid. Malheureusement, le filtrage ne fonctionne pas à partir des champs de saisie externes.

Quelqu'un pourrait-il me dire où se trouve mon bug de programmation?

Le code peut être trouvé ici: http://plnkr.co/edit/fiA666OzpBqpTrCiuXER?p=preview

    var myDummyData = [{name: "Moroni", age: 50},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34}];
    var myDummyData2 = [{name: "aTest", age: 50},
        {name: "bTest1", age: 43},
        {name: "cTest2", age: 27},
        {name: "dTest3", age: 29},
        {name: "eTest4", age: 34}];

    $scope.filterOptions = {
        filterText: ''
    };

    $scope.gridOpts = {
        data: myDummyData,
        enableFiltering: true,
        columnDefs: [
                    {name: 'Name', field: 'name', enableFiltering: true
                        , filter: {
                            term: $scope.filterOptions.filterText //DOES NOT WORK... BUT WHY
                        }
                    },
                    {name: 'Price', field: 'age'}
                ]
    };


    $scope.updateData = function(newValue){
         //console.log($scope.gridOpts.data);

         console.log($scope.gridOpts.columnDefs[0].filter);
         $scope.gridOpts.columnDefs[0].filter = {term: newValue};
         console.log("Scope nameid set " + $scope.gridOpts.columnDefs[0].filter.term); //is set but no update
         //$scope.$apply(); //not possible gives error! WHY??


         //$scope.gridOpts.data = myDummyData; //for testing works
    };


    $scope.swapData = function () {
        if ($scope.gridOpts.data === myDummyData) {
            $scope.gridOpts.data = myDummyData2;
        }
        else {
            $scope.gridOpts.data = myDummyData;
        }
    };

    //DOES NOT WORK BUT WHY
//        $scope.$watch('filterOptions.filterText', function (newValue, oldValue) {
//            if ($scope.filterOptions.filterText) {
//                $scope.filteringText = newValue;
//                $scope.updateData(newValue);
//            }
//        });

L'idée est d'avoir une barre de navigation contenant un champ de recherche. Plus tard, je veux filtrer en fonction des rangeliders sur d'autres colonnes. Cependant, même le filtrage de chaîne standard ne fonctionne pas dans mon exemple.

Questions:

  1. Quelqu'un pourrait-il me dire où est mon problème actuel? Plus précisément: pourquoi le filtrage des champs de saisie externes ne fonctionne-t-il pas?
  2. L'autre question est de savoir comment lier les valeurs min et max des curseurs de plage à par exemple la colonne d'âge dans mon exemple? (directement lié au problème de liaison en question (1))

J'ai cherché des réponses, mais soit c'est directement un problème de liaison que je ne peux pas saisir, un simple problème de programmation js, ou une mise à jour ngGrid vers un problème ui-grid.

Merci beaucoup d'avance

javascriptangularjsangular-ui-grid
20
cojack20

La réponse à votre première question, ils n'ont pas encore vraiment fait une option de recherche globale pour l'UI-Grid, vous devez donc faire un peu de travail. Le mode de fonctionnement actuel des filtres de colonne est angular surveille le champ de saisie du filtre de colonne pour une modification, et lorsque vous tapez dans la zone, il actualise son filtre. Par conséquent, votre filtre ne s'appliquera que si vous forcez cette zone de saisie à déclencher l'événement de modification. La solution de contournement consiste simplement à filtrer les données et à les recharger. Par exemple:

Dans votre zone de recherche de saisie HTML, ajoutez une actualisation

<input ng-model="searchText" ng-change="refreshData()" placeholder="Search...">

puis dans votre app.js

$scope.refreshData = function() {
  $scope.myGrid.data = $filter('filter')($scope.data, $scope.searchText);
};

oh, et n'oubliez pas d'inclure $ filter dans votre contrôleur

app.controller('myController', function($scope, $filter) {}

J'ai bifurqué votre exemple et l'ai modifié avec cette solution de contournement. Vérifiez-le ici: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

18
Dannzzor

essaye ça:

$scope.gridOpts = {
    data: myDummyData,
    enableFiltering: true,
    columnDefs: [
                {name: 'Name', field: 'name', enableFiltering: true
                    , filter: {
                        noTerm: true,
                        condition: function(searchTerm, cellValue) {
                            return (cellValue+"" === $scope.filterOptions.filterText+"");
                        }
                    }
                },
                {name: 'Price', field: 'age'}
            ]
};

pour la zone de saisie: <input ng-model="searchText" ng-change="refresh()" placeholder="Search...">

$scope.refresh = function()
{
    $scope.gridApi.core.refresh();
}

J'espère que ca fonctionne...

3
Tairman