7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 ng-repeat and Our First Filter

This lesson will review using ng-repeat to iterate over a list and display data from it, and then how to harness Angular filters for instant searching of a model. Finally, you’ll learn how to use objects in models and combine them with filters to build efficient interfaces.

3.2 ng-repeat and Our First Filter

In the last video, we took a look at our first couple of directives ng-show and ng-hide. In this video, we're gonna take a look at another different directive. The incredibly useful ng-repeat. NG-repeat is used for repeating the items of a model several times over on a page. You add it to the li, for example, of a list and it will use that li for a template for each of the repeated items in the model. To start with, we're gonna create a tiny little app that displays us a list of names based on a model specified in the controller. So you can see in the example I have here, that I have angular on the page. And I have created a div, which is controlled by the list controller and the list controller is specified in the script tag down at the bottom and it's taking a scope parameter that Angular supplies. Before we get this hooked up, I'm going to sketch out what I think the DOM should be for this particular app. So, it's gonna be an unordered list and have several lis in it with different list. I'll use Jeffrey and I'll use Dan and let's say, David. So you can see that, now we've sketched out this DOM. We can kind of understand what it is we need Angular to do. We need angular to repeat each li for a list of names. We're gonna specify the list of names in the controller. So, I'm going to create this list. I'll give t he scope variable a new property called names, which is our model and this model is an array. So far, we've only really seen strings in models. But models can be anything, they can be arrays or objects. So, I'm gonna put our list of names in here. "Tom", "Jeffrey", then we have "Dan" and we have "David". Now, I'm gonna delete out these li just leaving the first one. This first li is going to be used by Angular as the template for our ng-repeat attribute. That is, it's gonna repeat the contents of the li several times over for each item in the list that we give it. Angular has a special syntax for doing that. I'll add the ng-repeat attribute to the li and you can see immediately it disappears, because we haven't told Angular what it is we want to repeat. Angular has a special syntax for repeating. So I'm going to say, we want to extract each name in the names model. And you can see straightaway that we're repeating four times, but we're repeating the word Tom four times. That's because we haven't told Angular what data we want inside the li. So, I'm going to use a template and insert the name directly into the li and you can see straight away that this list is updated with each of the names in our list down here. I'm gonna add a new one. Let's say, Peter. So this gets added at the bottom. So I said in this video, I'd introduce you to filters. What I'd like to do is be able to search this list for a particular letter or a value or a person. Angular makes this incredibly easy with its filter syntax. But first, we need something to filter on. So, I'm gonna create a new div with an input of type search. It doesn't really need to be search, but it just adds some default styling that I think is suitable, then I'm gonna give this a model and call the model search. And now, we have a little search box up here. Next I'm going to use Angular's filter syntax to filter the list of names according to the contents of the search box. To do this, I use the pipe and say, filter on the search model. As soon as I stop typing in here, you're going to see that it filters out the names. So, I type the D and it will filter only the names that contain a D. It's actually just that simple. I can type T and we get things with T in it or an E and we get those with E and Tom and I get just me. If I type gibberish in here, then you can see we get nothing, because nothing matches. Angular is looking through each item in the array and matching it against the contents of the search. And you can see that it's case insensitive, because I can put in a lower case t and it matches Tom, which has an uppercase T. The values of the names array don't just have to be strings, we can actually make each of these an object and that's what I'm gonna do now to show you how cool Angular filters really are. So, I'll convert this into an object and say that Tom has a name and give him an age of 20. Again, I'll say, Jeffrey's name and then we'll give him an age of 30. Oh, I've misspelled that and I've just filled out the others to save time. Now you can see that we are missing values from here, that's because we haven't taught Angular how to display this information. I'm actually gonna swap out the names model for the word people, because what we really have here is a list of people. And I'll change it here in this repeater too. Because you can see that still nothing is being output, that's because we haven't specified what we want to display. I'll change this to person, so that we're repeating for each person in the list of people. And then say, what we want to display is the {{person.name}}. Now, I seem to have a bug here. So, I'll jump into the console and see what the problem is. Unexpected token. So, I think I might be missing a comma somewhere. Oh, look, I'm missing a curly brace there. So now, you can see that we have our list of people. Repeating each person in the list of people and we're apt indeed {{person.name}}. Person is inside the li, this whole object and so we can also use the person's age as I'll do now. I'll just quickly reformat this and then show the {{person.age}}. And now, we have the person's name and their age. Amazingly, the Angular filter still works. I can still filter for veracity and also for say, people who are 40 years old. This is because Angular knows that person is an object and it will go searching on each of the properties of the object for the value in the search filter. Hopefully, you're beginning to see how models, which are list of objects can be used to built path or interfaces using Angular. In the next video, we're going to look another directive ng-lick, which lets us listen for and take action when someone clicks.

Back to the top