The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building an Angular App: Filters

Building an Angular App: Filters

6:28
We are going to learn how to filter our bookmarks based on the selected category. We will learn how to manage the current category in the controller as well as set the current category from the view. As a bonus, we will see how to dynamically apply a class to visually indicate what category is the currently selected category. The code for this lesson [can be found on Github](https://github.com/eggheadio/egghead-angularjs-from-scratch-getting-started/tree/03-filters). *note: the tags correspond to the lessons.*
Watch this lesson now
Avatar
egghead.io

We are going to learn how to filter our bookmarks based on the selected category. We will learn how to manage the current category in the controller as well as set the current category from the view. As a bonus, we will see how to dynamically apply a class to visually indicate what category is the currently selected category.

The code for this lesson can be found on Github. note: the tags correspond to the lessons.

Avatar
derek chan

my ng-click="setCurrentCategory(null)" at the Eggy Logo anchor link does not work or react the same way as it does in the video. No response when I click on the logo and no categories shown in the main section. Please help.

In reply to egghead.io
Avatar
Mark

I have same problem as derek chan. It works in version 1.2.19 (as used in video) but not in later versions. I have tried using '!' '!!' '!null' but still can't get it to work :(

In reply to egghead.io
Avatar
patrick

Yes, it seems that setting the property to a null value in the current version ( 1. 3. 7 ) doesn't work anymore.

I was able to fix the issue by doing the following:

$scope.currentCategory = {"name":''};

In reply to derek chan
Avatar
shawn

for the filter, I had to do the following:

filter:{category:currentCategory.name}:myComparer"

then in the app.js:

$scope.myComparer = function(actual,expected){ 
if (expected===undefined) return true; 
return angular.equals(actual, expected); }

this is with ng 1.3.8

In reply to egghead.io
Avatar
shawn

that first 'javascript' shouldn't be there, it's just html

<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}:myComparer">

Can't edit the prior post as server tosses a 500

In reply to shawn
Avatar
Antonio

Yeah! It's great!

Is this because the angular version?

Thanks!

In reply to shawn
Avatar
Andy

Thanks for the tip.

Although, i also had to change the setCurrentCategory() to avoid any errors showing up in my console. I think this is because by clicking on the 'Eggly' link, we are still trying to access an indefined object. My code is as follows. Am i misunderstanding something as no-one else has suggested a problem with this?


function setCurrentCategory(category) {
if (angular.isUndefined(category)) { $scope.currentCategory = null; }    
else { $scope.currentCategory = category; }}

In reply to shawn
Avatar
Andy

Of course rather than modifying my setCurrentCategory() function, I could have just modified the html that linked to the Eggly logo to:

ng-click="setCurrentCategory(null)"
In reply to shawn
Avatar
Florian

I stumbled upon the same problem.

There is no need to create an own filter-directive.
This syntax worked for me.

<div ng-repeat="bookmark in bookmarks | filter:currentCategory.name">
Avatar
Sherrylicious

Thanks, it solves the version issue :)

In reply to Florian
Avatar
Paul

Hi - Could someone please explain what ng-class="{'active' ... is doing? ty

Avatar
JimTheMan

Yeah, I don't really understand what "active class" means either and how you are telling it to make the label stay highlighted. Maybe it is a css class in the eggly.css that we don't see?

In reply to Paul
Avatar
Harry

How does the filter in ng-repeat manage to work when the currentCategory is set to null?

Avatar
marcio

Hey Guys!

A silly question... How can I set a default category, my ideia is show for example a "development" category instead of the all bookmarks.

If some one can give a hand I will appreciate.

Cheers, Marcio

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?