Name: ngRepeat and Filtering Data
Uploaded: 2013-08-31T21:21:14-05:00
Description: When working with sets of data, it is common to need to repeat the same UI element over and over again with values from each object in the set. ngRepeat provides an elegant and simple way to accomplish this within your HTML. We will also provide a filter to a repeater that gives us basic search functionality.

When working with sets of data, it is common to need to repeat the same UI element over and over again with values from each object in the set. ngRepeat provides an elegant and simple way to accomplish this within your HTML. We will also provide a filter to a repeater that gives us basic search functionality.

ngRepeat and Filtering Data

**John Lindquist**: Now that we've looked into creating our own custom filters, I'd be remiss not to mention the filters provided by Angular JS. Let's look at the main filter which will allow us to search stuff. I'm going to start from scratch here. It's a blank slate right now. I'm going to take this data set I have of the Avengers cast. Copy that and I'll drop it in as a service.

My factory, we'll call this Avengers. This will return an Avengers object. Then return it, and we'll say Avengers cast is this. All right, now all we're going to do is create a controller called, Avengers controller, and set the cast equal to... Actually we'll set the Avengers object equal to the Avengers, which I haven't injected yet. Let's add that here.

All right, if you see what's going on, I just created a controller. All we're doing is providing the Avengers model into our scope, and that's all we need to do in our script. I just have the service and provide it. Let's set up the controller as was Avengers controller, and then we can create a table and loop through that data.

Let's do a table with row. Each row leaves something called ng-repeat, which is one of the most powerful directives that Angular provides to loop through each actor in the Avengers cast. This will have two columns in it. The first one being, actor's name. The second one being, the actor's character.

Again, this is just name and character mapping to name. Character and Avengers cast is simply the Avengers cast, which is an array of these objects of name and character. Hit refresh here. We get a nice list of the name and the character in the Avengers cast. Let's set up a way to search through this using the main filter in Angular.

We'll set up an input type of text, and the model for this will be, we'll say, search text. That's generic enough for anybody. Then we'll set up a filter on the ng-repeat, instead of the way we did our own custom filter. We just modified a string. This time we're going to limit this set. We'll say filter and the limiter for it, the model or passing in it is going to be search text.

The moment I start typing in here now r,o,b; brings me to Robert. I see h,r,i; brings me to Chris. You'll also notice if I type, Steve, we're also getting the character as well as the actor name. The way you would limit that is, instead of doing a search text, we could do search, dot, name, and then filter by the search object. This would mean it would only limit it to just the name of the actor.

Steve wouldn't work anymore, but Chris still would. If we wanted to filter by the character, you can see that now Steve will work, but Chris won't. If you want to do either one, you can just do a dollar sign, and this will show Chris and Steve. That's the main filter function provided by Angular JS.

It takes an object or a string, if it's an object you can limit what you want to search for by the name of the property, like name or character, and it will limit the name or the character. Or a dollar sign if it's just a string, it'll just search everything. That's the way you can use it. It's pretty straight forward, not much work here.

Most of the work is copying and pasting. You see if I collapse that, we only have one service, one controller, and not a lot going on other than repeating, and using one of the awesome filters already provided. We'll go into more filters in the next video.

ngRepeat and Filtering Data

Share this video with your friends