Forward Advance Learning

Filters

  • Filters are provided for us by little factory functions which we define.
  • Define a filter using myApp.filter('filterName', function() {});
  • the function is a factory which should return another function which acts as the filter.

For example

myApp.filter('filterName', function() {
return function(str) {
return "hello there " + str + "!";
}
});

Exercise - Reverse Filter

You can reverse a string using something like:

"abc".split('').reverse().join('');

You might like to try this out in a console.

Create a reverse filter that reverses a string.

Exercise - Filtering the first element from an array

We can filter an array in a similar way. The filter returns a function which receives an array, and returns a modified array.

Create a filter that returns only the first element in the array.

Exercise - Pagination

Create a filter that returns the first n elements from an array.

Exercise - Tweets

Tweets often contain #hashtags and @mentions. Write a a filter that takes a raw tweet and hyperlinks the mentions and hashtags.

Something like this:

I'm sorry @dave, #icantdothat
```html
becomes:

I'm sorry @dave ,

#icantdothat ```html

Karma

We can get hold of a filter using the $filter injectable service. Make use of this service to write a Karma test for your filter.

Exercise - Redit style vote filtering

Given an array of comments and votes like this:

[
{
comment: "I really like cheese",
votes: 10
},
{
comment: "I'm not so sure about edam though",
votes: -2
},
{
comment: "Gouda properly rocks!",
votes: 4
},
{
comment: "I quite like a bit of mild cheddar",
votes: -19
},
{
comment: "Cheese is just old milk",
votes: -8
}
]

Create a vote filter that only shows comments which scored over a certain amount.

Hint - use the Array filter method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Now add a number field and bind it to a value. When you change the value, only comments with a higher value will be shown.

for bonus points, use a range slider like so:

<input type="range" min="-100" max="100" />