Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Filtering / Javascript / Ng Grid

How To Filter My Data? (ng-grid)

Post a Comment
I think this is most likely very simple but I cannot find any clear documentation on how to add a filter outside of the 'filterText' that is shown on their website. What I am tryin

Solution 1:

You can use angular to bind to the filterOptions.filterText variable. There's a plunker here to demonstrate: http://plnkr.co/edit/PHdBhF?p=preview

I'll post the same code below:

// main.jsvar 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
      };
    });

The above should be about identical to the plunkers on the docs page.

<!DOCTYPE html><htmlng-app="myApp"><headlang="en"><metacharset="utf-8"><title>Custom Plunker</title><linkhref="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" ><linktype="text/css"href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" /><linktype="text/css"href="style.css" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><scriptsrc="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script><scripttype="text/javascript"src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script><scripttype="text/javascript"src="main.js"></script></head><bodyng-controller="MyCtrl"><strong>Filter:</strong><inputtype="text"ng-model="filterOptions.filterText" /><br/><br/><divclass="gridStyle"ng-grid="gridOptions"></div></body></html>

Notice ng-model="filterOptions.filterText" on the <input ...>. That's all it takes!

Solution 2:

I have found a way that updates instantly. Basically I hold a hidden set of all my data, and upon receiving new data or changing my filter - I apply this filter to the full data set and hand the grid the filtered version.

This lets me use comparators (i.e. age >= 50) in my filter, which is the purpose of this question. 

// 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) {
        returnfalse; 
     }
     returntrue;
 }

Solution 3:

This is my solution!!

It found with ng-grid in html:

<inputtype="text"ng-model="miinput"placeholder="Filter text"/><divclass="gridStyles"ng-grid="gridOpciones"></div>

in 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"}]

You may like these posts

Post a Comment for "How To Filter My Data? (ng-grid)"