javascript - How to filter my data? (ng-grid) -
i think simple cannot find clear documentation on how add filter outside of 'filtertext' shown on website. trying simple this:
$scope.filteroptions = { filter: $scope.myfilter, // <- how this? useexternalfilter: true } $scope.gridoptions = { data: 'entries', enablecolumnresize: false, multiselect: false, enablesorting: false, selecteditems: $scope.selectedentries, filteroptions: $scope.filteroptions } $scope.lowerlimit = 50; // filter $scope.myfilter = function(entry) { if (entry < $scope.lowerlimit) { return false; } return true; } edit: or maybe if filter datasource somehow? tried this:
$scope.gridoptions = { data: 'entries | filter: myfilter', enablecolumnresize: false, multiselect: false, enablesorting: false, selecteditems: $scope.selectedentries, } but throwing quite few errors.
you can use angular bind filteroptions.filtertext variable. there's plunker here demonstrate: http://plnkr.co/edit/phdbhf?p=preview
i'll post 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 identical plunkers on 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 <input ...>. that's takes!
Comments
Post a Comment