1.6 The Unique Utility
In this lesson you’ll examine the unique utility, which filters the objects in an array based on a selected key.Related Links
1.AngularUI Utilities7 lessons, 35:13
2.AngularUI Modules3 lessons, 22:13
3.Other AngularUI Components4 lessons, 26:14
4.Conclusion1 lesson, 00:58
1.6 The Unique Utility
In this lesson, we're going to talk about AngularUI's unique utility. I've copied our project here, and we now have one called unique. And the way the unique utility works is, it allows us to filter an array of objects by the values of a specific key, so that we only have unique values in that key. Now, let me show you what this means. In our MainController here, I'm going to paste some data so I don't bore you by typing it all out. Basically, as you can see, we just have an array of items, each with a first name and a last name, and an ID here. Now notice we have some duplicate first names. So, for example there's two Johns here. And we also have some duplicate last names. So, there's two Smiths and two Does. And so, what we're gonna do is display these items in a table, and then we can use the unique utility to only show unique items of a given key. So, we could choose unique first names and only show the first John and not the second one, or we could show unique last names and only show the first Smith and Doe and not the last ones. So, of course, first we have to require our dependencies, so this is ui.unique. Now, let's open up our Index.html page and inside the controller here, let's start by displaying those items in a table. So, this should be pretty straightforward. Let's create a table element here, and then in here, let's have, we'll start with a table row that will be our header. So, we'll have our table row and then in here, we have table header for the ID. We can have table header for the First Name and then we can have a table header for the Last Name. Now, after this table row, of course we wanna have a table row that will be repeated. So, we'll do ng-repeat, and we'll say this is for item in items. And then in here, we need our table data, right, or our individual table cells. So in here, we can say item.id, in here we can say item.firstName and we can say item.lastName. Excellent. Okay. So now, if we open this up in a browser, you can see we have our table here. Let's add just a little bit of styling to make it look more table-like. So, we'll set the table, the table data and the table header here, all to have a border of 1px solid black. Then, let's give the table data and the table header, give them each a padding of 5px. Okay, that looks good. Let's also just do border-collapse and we'll set it to collapse. All right, so there we have a little bit of a nicer looking table. So now, we need to enable the filter. So, the way we can do this is, as you might guess, the same way we would use any filter, we filter items based on unique and we pass it the value. So in our case, we will just call this field, and now we actually have to set our field value. So, let's create a few buttons to do that. So, let's create a button here, and we'll say ng-click. And when this is clicked, we will set field equal to well the first one will be blank, then we'll say All, as the text inside this button. But then, let's add two more fields here. The first one will say First Name, and the second one will say Last Name. All right. And then we'll set the field equal to lastName. Don't forget we need to give this the same punctuation and the first one will be firstName. Don't forget we need to give these the same casing as we do for the actual names of the properties on these elements. If we come back here and refresh the page, you can see our buttons are showing up above here. The easiest way to keep track of what we're moving is to look at the IDs. We have IDs 1 through 6 here. If I click First Name, you can see that 3 has been removed. All brings 3 back. Now we can click Last Name, and you can see now we only have 1, 2, 3 and 6, so 4 and 5 have been removed. We switch this to First Name, only 3 is removed, and All, of course, shows them all. And, to be completely honest, that's all there is to the unique filter. It just gives us a very easy way to filter an array of objects, based on the keys in those objects.