¿Cómo filtrar mis datos? (ng-grid)

Question

¿Cómo filtrar mis datos? (ng-grid)

Creo que esto es muy simple, pero no puedo encontrar ninguna documentación clara sobre cómo agregar un filtro fuera del 'filterText' que se muestra en su sitio web. Lo que estoy tratando de hacer es algo tan simple como esto:

$scope.filterOptions = {
    filter: $scope.myFilter,  // <- How to do something like this? 
    useExternalFilter: true
}

$scope.gridOptions = {
        data: 'entries',
        enableColumnResize: false,
        multiSelect: false,
        enableSorting: false,
        selectedItems: $scope.selectedEntries,
        filterOptions: $scope.filterOptions
}

$scope.lowerLimit = 50;
// My Filter
$scope.myFilter = function(entry) { 
    if (entry < $scope.lowerLimit) {
        return false; 
    }
    return true;
 }

Editar: O tal vez si pudiera filtrar la fuente de datos de alguna manera? Probé esto:

$scope.gridOptions = {
        data: 'entries | filter: myFilter',
        enableColumnResize: false,
        multiSelect: false,
        enableSorting: false,
        selectedItems: $scope.selectedEntries,
}

Pero está lanzando bastantes errores.

26

angularjs ng-grid javascript filtering

Author: Alex, 2013-07-31

Source

3 answers

Puede usar angular para enlazar a la variable filterOptions.filterText. Hay un plunker aquí para demostrar: http://plnkr.co/edit/PHdBhF?p=preview

Publicaré el mismo código a continuación:

    // main.js
    var app = angular.module('myApp', ['ngGrid']);
    app.controller('MyCtrl', function($scope) {
      $scope.filterOptions = {
        filterText: ''
      };

      $scope.myData = [{name: "Moroni", age: 50},
                       {name: "Tiancum", age: 43},
                       {name: "Jacob", age: 27},
                       {name: "Nephi", age: 29},
                       {name: "Enos", age: 34}];

      $scope.gridOptions = {
        data: 'myData',
        filterOptions: $scope.filterOptions
      };
    });

Lo anterior debe ser casi idéntico a los émbolos en la página de documentos.

    <!DOCTYPE html>
    <html ng-app="myApp">
        <head lang="en">
            <meta charset="utf-8">
            <title>Custom Plunker</title>  
            <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
            <link rel="stylesheet" type="text/css" href="style.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
            <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
            <script type="text/javascript" src="main.js"></script>
        </head>
        <body ng-controller="MyCtrl">
          <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" />
          <br/>
          <br/>
          <div class="gridStyle" ng-grid="gridOptions"></div>
        </body>
    </html>

Aviso ng-model="filterOptions.filterText" en el <input ...>. Eso es todo lo que necesita!

22

Author: c0bra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-21 23:54:53

Esta es mi solución!!

Se encuentra con ng-grid en html:

<input type="text" ng-model="miinput" placeholder="Filter text"/>
<div class="gridStyles" ng-grid="gridOpciones">
</div>

En js:

//pagination
$scope.filterOptions = {
    filterText: $scope.miinput,
    useExternalFilter: true
}; 
$scope.totalServerItems = 0;
$scope.pagingOptions = {
    pageSizes: [10, 25, 50],
    pageSize: 10,
    currentPage: 1
};  
$scope.setPagingData = function(data, page, pageSize){  
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.vocabulario = pagedData;
    $scope.totalServerItems = data.length;
    if (!$scope.$$phase) {
        $scope.$apply();
    }
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
    setTimeout(function () {
        var data;
        if (searchText) {
            var ft = searchText.toLowerCase();
            $http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {     
                data = largeLoad.filter(function(item) {
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                });
                $scope.setPagingData(data,page,pageSize);
            });            
        } else {
            $http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {
                $scope.setPagingData(largeLoad,page,pageSize);
            });
        }
    }, 100);
};

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

$scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);

//cada vez que escribo en el input
$scope.$watch('miinput', function () {
    if ($scope.miinput !== "") {
        $scope.pagingOptions.currentPage=1;
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.miinput);
    }else{
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);


 //
 $scope.gridOpciones = { 
    data: 'vocabulario',
    showGroupPanel: true,
    enableCellSelection: true,
    enableRowSelection: true,
    enableCellEdit: true,
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions,
    columnDefs: [
    {field:'I', displayName:'Id', width:60,resizable: true}, 
    {field:'T', displayName:'Type',visible:false,resizable: true},
    {field:'N', displayName:'Level',width:60},
    {field:'L', displayName:'List',width:100},
    {field:'P', displayName:'English',minWidth: 400},
    {field:'R', displayName:'Spanish', minWidth: 400}]
 };

/ / JSON

 [
{"I": "3001", "T": "F", "N": "3", "L": "01 a", "P": "HE IDO ALL\u00cd DOS VECES ESTA SEMANA", "R": "I'VE GONE THERE TWICE THIS WEEK"},
{"I": "3002", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L ME HA LLAMADO VARIAS VECES HOY", "R": "HE'S CALLED ME SEVERAL TIMES TODAY"},
 {"I": "3003", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS LLEGADO A UNA CONCLUSI\u00d3N", "R": "WE'VE REACHED A CONCLUSION"},
 {"I": "3004", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS DECIDIDO CANCELAR EL PROYECTO", "R": "WE'VE DECIDED TO CANCEL THE PROJECT"},
 {"I": "3005", "T": "F", "N": "3", "L": "01 a", "P": "NO HAN HECHO NADA", "R": "THEY HAVEN'T DONE ANYTHING"},
 {"I": "3006", "T": "F", "N": "3", "L": "01 a", "P": "HE PROBADO MUCHAS DIFERENTES PROFESIONES", "R": "I'VE TRIED MANY DIFFERENT PROFESSIONS"},
 {"I": "3007", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L HA PERDIDO LA VOZ", "R": "HE'S LOST HIS VOICE"}, 
{"I": "3008", "T": "F", "N": "3", "L": "01 a", "P": "ELLA NO HA VENIDO POR AQU\u00cd \u00daLTIMAMENTE"}
]

0

Author: JoLuGaMa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-12 22:23:50

score 6 · Accepted Answer

He encontrado una manera que se actualiza instantáneamente. Básicamente tengo un conjunto oculto de todos mis datos, y al recibir nuevos datos o cambiar mi filtro, aplico este filtro al conjunto de datos completo y le doy a la cuadrícula la versión filtrada.

Esto me permite usar comparadores (es decir, edad > = 50) en mi filtro, que es el propósito de esta pregunta.

// Full unfiltered data set
$scope.entries = []; // Updated and pushed to

$scope.gridOptions = {
    // The grids already filtered data set
    data: 'filteredEntries',
    enableColumnResize: false,
    multiSelect: false,
    enableSorting: false,
    selectedItems: $scope.selectedEntries,
}

 $scope.$on("updateEntries", function(data) {
     // My table is filled by socket pushes, this is where it is updated.
     $scope.updateFilters();
 }

 $scope.$on("newFilter", function(newFilter) {
     // This is where I update my filter
     $scope.updateFilters();
 }

 $scope.updateFilters = function() {
     // Filters the full set and hands the result to the grid. 
     $scope.filteredEntries = $filter('filter')($scope.entries, $scope.myFilter);
     $scope.$digest();
 }         

 // A modifiable limit, modify through newFilter so data is refiltered
 $scope.lowerLimit = 50;

 // My Filter
 $scope.myFilter = function(entry) { 
     if (entry < $scope.lowerLimit) {
        return false; 
     }
     return true;
 }