Usual Angular.js style filtering and sorting with a twist of Crossfilter for improved performance.
Want to see pretty graphs? Log in now!
npm install ng-crossfilter
|17||downloads in the last week|
|33||downloads in the last month|
|Last Published By|
|Version||0.2.1 last updated 5 months ago|
|Keywords||crossfilter, angular, filtering, sorting|
|Dependencies||grunt, grunt-contrib-uglify, grunt-mocha, grunt-contrib-jshint|
ngCrossfilter uses Crossfilter for a significant improvement in performance. It introduces an intuitive microsyntax for filtering which is simple to get to grips with.
ngCrossfilter is performed in your HTML template as you do with other Angular filters.
In the following HTML, the first item in the object is for the filtering, whereas the second item is for the sorting. This is always the case in
ngCrossfilter – the
strategy would appear at the end of the object as a simple string – reduce or afresh.
<li ng-repeat="book in books | crossfilter: 'name': value : 'id': 'asc'">
From the above you can see that we're using the
name property to filter on with its corresponding
value, and for the sorting we're using the `id property with the asc value.
As is typical with Angular, if you update any of the properties then the filtering and sorting will automatically change. Each property should ideally be set with a variable as opposed to an explicit string.
Since Crossfilter allows you to filter data in different ways,
ngCrossfilter introduces an easy-to-learn microsyntax to apply different types of filters using the
Mostly the filtering strategy is based on the leading character of the filter string.
All filters can be cleared by passing
false to the
- Exact Match: Don't prepend the value with anything;
- Negative Exact Match: Prepend the value with
- Fuzzy Match: Prepend the value with
- Negative Fuzzy Match: Prepend the value with
- Expression Match: Prepend the value with
- Range Match: Set the value to an array range (
The strategies in
ngCrossfilter have the same name and behaviour as those in Snapshot.js.
afresh: Each filter resets the previous filtered collection;
reduce: Each filter filters down on the current filtered collection;
If you'd like to change the strategy from the default –
afresh, then simply modify the
strategy property to
reduce – see example.
As with all of my projects, you're more than welcome to contribute. Please include a unit test for your additions, and if the Travis build passes then it will be merged into master.