javascript - tag - ¿Cómo filtrar mis datos?(ng-rejilla)

title of page html

Question

Creo que es muy probable que sea muy simple, pero no puedo encontrar una 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;
 }

Edición: ¿O tal vez si pudiera filtrar la fuente de datos de alguna manera? Intenté esto:

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

Pero está lanzando bastantes errores.

Answer 1

¡Esta es mi solución!

Se encontró 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"}
]

Answer 2

He encontrado una forma que se actualiza al instante. Básicamente, tengo un conjunto oculto de todos mis datos, y al recibir nuevos datos o cambiar mi filtro, aplico este filtro a todo el conjunto de datos y entrego 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;
 }

Answer 3

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

Voy a 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 plunkers 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>

Observe ng-model="filterOptions.filterText" en la <input ...> . ¡Eso es todo lo que se necesita!