AngularJS Fundamentals
Create a Filter with AngularJS
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.
Instructor: [00:00] 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.
[00:22] 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".
[00:47] 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.
[01:23] 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.
[01:38] 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.
[01:50] 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".
[02:18] Then Angular knows that this category is referencing the current element that you actually click. It's very good at keeping track of context.
[02:30] 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".
[02:55] 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.
[03:08] 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.
[03:31] 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.
[03:47] In here, let's create another function called "isCurrentCategory." We'll also accept the "category" parameter.
[03:59] 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.
[04:29] 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.
[04:53] 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.
[05:15] 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.
[05:31] Let's see what we've done here, just for the sake of review.
[05:37] 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.
[05:49] 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.
[06:03] 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.
[06:22] Thanks for sticking along for this video. I look forward to seeing you in the next video.