Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 960 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Building an Angular App: Filters

6:28 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

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

Welcome to the next video in the Eggly series. In this video, I'm going to show you how to set the current category in the controller, as well as filter the bookmarks to the category that they belong to, depending on the current category.

The first thing that we need to do is define the ability to actually set the current category. So let's hop into the controller here. Let's create a property called "currentCategory" and we are just going to set this to "null".

Then I'm also going to define a function called "setCurrentCategory" that accepts a "category" parameter. It just takes that parameter and sets it to "currentCategory", like so. Then what I will do is make this available to the view, by attaching it to scope, like so.

This is just a way to define your public and private methods, using what is similar to a revealing module pattern. Until I do this line, "setCurrentCategory" is essentially a private function.

But then, the minute that I attach it to scope, using this, it's now available and it essentially becomes public, or available to the view.

From here, we can now set the current category, so let's hop into the actual HTML here. From here, on the anchor tag here we'll do "ng-click" and we're going to call "setCurrentCategory" and we are going to pass in "category".

Then Angular knows that this category is referencing the current element that you actually click. It's very good at keeping track of context.

Now we are setting current category. Then in the repeater here, we are going to use this filter syntax and we are going to simply say "filter". Then we're going to say filter on the "category" property, where it matches "currentCategory.name".

Let's see this in action. Let's refresh, let's click Development, and now you see the Development bookmarks -- Design, Exercise, Humor, and so on.

But let's also hook up the logo to reset it to nothing. I'll hop up here, "ng-click", "setCurrentCategory", and we're going to just pass a "null". Refresh the page. We'll go Design...then here you can see that it actually reset it.

Now, wouldn't it be nice if you clicked on Category, and you were able to tell what category you were on? Let's take this one step further and hook that up.

In here, let's create another function called "isCurrentCategory." We'll also accept the "category" parameter.

What we're going to do is "scope.currentCategory" is not equal to "null", and "category.name" does equal "currentCategory.name". What this will do is, it will return true if the current category is not null, and the names match up.

Let's go ahead and attach this to scope, so that we can use it in our view. Then we will hop over here. In this list item here we are going to use "ng-class" to dynamically attach an active class.

How this works is it will attach this active class if the result of this expression that we are going to put in here is true. It will take it off, or not apply it, if it is false, so "isCurrentCategory", and we are going to pass in "category", like so.

Once we click on it, then this active class should be applied because now the category that we clicked on is the current category. Let's see this in action. Development...you can see now that when I take my mouse off, that this active class is applied.

Let's see what we've done here, just for the sake of review.

We've created a method called "setCurrentCategory", also another method called "isCurrentCategory". Then we made that available to the view by attaching it to the scope object.

Then we created a property called "currentCategory" that we are now using to keep track of the current category, but also using it to define or dynamically apply a class to our view.

This concludes this video. Stay tuned for the next episode, where I am going to show you how to use variables on scope to handle state management. In this case, it's going to be toggling between the creating of a bookmark state, or the editing of a bookmark state.

Thanks for sticking along for this video. I look forward to seeing you in the next video.

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