How to filter my data? (ng-grid)
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 trying to do is something as simple as this:
$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;
}
Edit: Or maybe if I could filter the datasource somehow? I tried this:
$scope.gridOptions = {
data: 'entries | filter: myFilter',
enableColumnResize: false,
multiSelect: false,
enableSorting: false,
selectedItems: $scope.selectedEntries,
}
But it is throwing quite a few errors.
Answer
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.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
};
});
The above should be about identical to the plunkers on the docs page.
<!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>
Notice ng-model="filterOptions.filterText" on the <input ...>. That's all it takes!