Angularjs 1, Building a Data-Driven App, Searching through check ins

Adding search is really easy to do with angularJS, the framework’s data binding makes it easy to modify our display depending on what’s happening with your models. So, let’s take a look at how that works with Firebase. Now, the first thing we’re going to need to do is to add a search box to this Check-ins page. So, let’s go to the checkinslist.html and right after this paragraph right here, I’m going to add a new div and it’s going to have a class of search and also cf, cf is just really a clearfix and that is a trick to make sure that your layout is working properly.

So in here, we’re going to type in a headline, it’s going to say “Search Checkins,” and then we’ll create an input field and it’s going to be of type text, and what we’ll do here is create a model for this with ng-model and we’re going to call this query. We’ll also put a placeholder in here just so that it looks nice. All right, let’s go ahead and save this and if we look at our page, we should now have this little search box.

Now to make this work is actually super easy with angularJS, we can create a filter where we list these different users. So, right here is where we go through the list of users and this is the list of users here, so what we can do is create a filter that is tied to this ng-model, right in our ng-repeat statement. So we can just say filter and ask to filter by query. So what that will do is, if I type something in here, it’s going to limit the list items to whatever I type in here, and that’s pretty cool, let’s make this bigger so you can see how awesome that is.

So I type in letters in here, it’s going to limit the users to any users that match whatever I have in here. And that’s surprisingly simple to do, and it’s one of the cool angularJS features. It’s really no different with the Firebase database, we’re using an array to list these items, and that’s actually the reason why we use the Firebase array as opposed to a Firebase object. The Firebase array outputs an array-like element that we can use in filter and ng-repeat type directives.

Now, if you want to make this search a little bit more interesting, I can add a few other things here. So, let’s say that we want to search by first name and last name and then maybe also the date. So, what I’ll do is I’ll create a div with the class of formgroup, this is just a layout sort of field to make things more easily organizable. And then, I’m going to create a span with a class of label here and I’m going to put the word by in there, and then I’m going to create a select field, so this is just a typical select html field.

And of course, we’re going to have to give it a model, so we’ll say ng-model=”order” and then, like with any other select html field, we’ll type in option here and put in a series of options, I’ll make this one firstname, and First Name the title here. And let’s do some other ones, so of course, like last name here and then finally date.

So, let’s go ahead and save that and you can see this pop-up field, it has all those three values and if we want to also filter by that, all we do is modify the filters. So we can add another filter here called orderBy and then we can put in order, and we’ll put the pipe in again, so now it should be able to order by the order of the people, their last name, or the date.

So, that’s pretty cool and it’s very simple to use. The other thing that we may want to do is allow users to organize these in ascending or descending order, so let’s go ahead and take care of that. So for that we’ll create another form group. And some other input fields, this is going to be type radio, and we’ll give it a name of direction, and of course we’ll need an ng-model for that as well.

Let’s go ahead and make this wider so we can see all the code at once, then we’ll create a label here, and this is a label for something called dirascending, I need to go ahead and make that the id. That way the label will be tied to the input field, and this will be the ascending, and then we’ll put in a non-breaking space here, just so that the next thing, which will be another input field kind of like this, we won’t need this other space here, and then instead of ascending, this is going to be descending, so this is going to have to be over here, descending.

Right, so these are both going to be named direction, that’s how radio buttons work. If they’re both named the same thing when you click on one radio button, if there’s another one that is selected, it’s going to deselect that other one, as long as the names match. Now we’re not going to give a value to this one, but I will to this one, and let’s give it a value of reverse, and let’s see if we can organize these a little bit better.

So, what I like to do is sort of put all the traditional html things on one line, and then sort of the angular specific stuff on another line. Now let’s see if that’s working. So now we have an ascending and descending field, the filters aren’t working for this, but at least it’s looking pretty good. And let’s go ahead and add that to our filters. The way that this works is, by default if you don’t specify a direction, the direction will be ascending, if you do specify a direction and it exists, we can actually put it here.

And if the direction has a value of reverse, it will be in descending order. So, that’s why we don’t need to put a value right here on the regular ascending field, right? And let’s go ahead and save this, and let’s go ahead and order by first name ascending, and then we’ll do descending, and you can see that it’s sorting in ascending and descending order. So, that’s what this section does here. So, these are pre-filters that you just apply to a list of elements and angular takes care of almost all the hard work, the only thing that we may want to do here is initialize these values.

If I refresh this page, notice that it’s not going to be in any particular order. Right, the names aren’t in any particular order, so I would like this to, by default, maybe say first name. And the way that we do that is by initializing some of these models that we have in this form. So, I’m going to need to go into checkins.js and right after this checkins list, I’m going to set up some defaults for those variables, so we’ll set up the order to be firstname, we’ll set the direction to null, which means nothing, which means that it’s not going to be set up and that means that it will be by default ascending order.

And finally, we’ll set the query to nothing, just to makes sure that the field is clear. So, let’s go ahead and save that, and when we go back to our form, we should see that the first name is already chosen from this list, and everything is ascending order, and the search checkins will be clear when the form first loads. So, adding search is one of the things that’s actually super fun to do with angular because it takes care of so many things for you, and you can make a pretty complicated but easy to do search just by adding a few fields that allow you to sort and control how that sort displays within your angular app.

LEAVE A REPLY

Please enter your comment!
Please enter your name here