[SOUND] Before we jumped in to explaining yet another feature of ng repeat directed which is being to filter it. Let's talk about filters in general and how they worked in JavaScript. I'm right now allocated in Lecture18 folder which is located at fullstack-course5 examples folder. And we have an extra couple of files here, filter.html and filter.js. So filter.html is a simple HTML page and all we really need it for to include our filter.js script. So let's go ahead and go to filter.js. And in this point, all it has is a simple array with numbers one through ten, and all we're doing here is saying number array and just basically console logging it. Let's go to our browser and see that in fact it is logging one through ten. So the idea of filtering arrays is applying some sort of a function to this array such that only some of these elements make it to the new array and not all of them. So let's go ahead and go to the Mozilla Developer Network and we'll look up the filter function in the Array.prototype. You could see the filter says, filter method creates a new array with all elements that pass the test implemented by the provided function. So construct is basically the original array you call the filter function, give it some callback and possibly some extra arguments. So the return value is the new array with the elements that's passed the test. In every argument into our callback is one of the items inside of the array. And think you can give a look at a couple of examples here that are going on. So let's go ahead back to our page and let's go back to the code editor and let's go ahead and write our first filter. We'll create a new array called filteredNumberArray and we'll call the original numberArray and we'll walk the filter function and we'll put a semi-colon at the end. And this takes another function we'll need the name for it and the value of this function is going to be each item inside of the number array. So what we need to do, we need to return whether or not this value, this particular value that is past is true or false. Meaning, does it make the cut, or doesn't it make the cut. So lets return, for example, value > 5. In other words, if the value passed in is greater than five, then that item will make it into the new filteredNumberArray. And if it's less than five or equal to five, it will not. So now, if we go ahead and log that we'll say filtered number array and we'll call filteredNumberArray. And if we save that and go back to our browser, we'll see that the filtered number array now starts with six and ends in ten. In other words, anything below five did not make it into this new array. In fact we could make the code a little bit more elegant, since we're having a function here inside as a value to another function. We could just go ahead and cut that out and create a new function let's call it above five filter. And basically, well going to need the whole function equation here and basically just have the return value here. And so now we could take that above5Filter and, as a value, this is now the function value, pass it into the filter as an argument. So if we save that now, the code looks a lot more elegant. We'll go back, and we see value is not defined. And that's because we messed up, we forgot to put the value right here as an argument because that's what it takes. And now you should see the filtered number array 6, 7, 8, 9, 10. Okay, so that's as far as numbers are concern. Well, what happens if we have a bunch of strings. Let me cut and paste in array that I've prepared that is the exact shopping list from the previous lecture. You could see here as got again a shopping list of eight items and we logging the shopping list just to the console, we'll save that, let's go back to our browser. And you'll see that the shopping list contains these eight items on the screen. So let's go back to the code editor and try to create a filtered shopping list. So for that we'll start with the searchValue, that's what we're looking for and we'll call it Bismol. That's where we're searching for, that's the string we're searching for. And we'll create a function call it containsFilter and the value again is going to be the value through the iterations of the filter function. So in here, we're going to do a simple comparison of saying value.indexOf and we'll save a searchValue. And if it's not equal to negative one it means that we found that search value as part of the string that the value will be. And the value again is one item inside of the array. So now we have our function one more time. So now we could go ahead and say var searchedShoppingList, we're going to invoke the filter function on the original shoppingList and provided the contains filter that we created just a second ago. So now we can log this searched shopping list and we'll log it and say searchedShoppingList. And let's take a look, so we're looking for Bismol, we go back to our browser. We see that now only the items that contain the word Bismol, are actually in fact part of array, which is one, two, three items. Okay, so let's apply that knowledge to AngularJS and NG repeat. We would like to be able to filter the array that is being output by the entry repeat on the fly. So the first thing, if we go to AngularJS which is our angularjs.org. Go to Develop and Developer Guide. And you'll see here filters, we've been to this website before. And one more time, we've been to this link which is the built in filters. In other words filters that we don't build ourselves. If we click on that, you'll see there is filter filter. Kind of repetitive, but it selects a subset of items from an array and returns it as a new array. Sounds just like our filter function, and in fact, it is. Now if we click on that, you'll see there's a couple of ways of declaring it inside HTML binding or inside JavaScript. We're interested in the HTML template binding one. And we see here that it's a filter expression, followed by a pipe, just like any other filter. Then the word filter, then some expression. What can that expression be? Well if that expression happens to be a string, it says here that the string is used for matching against the contents of the array. All strings or objects with string properties in array that match the string will be returned and so on. And there's a whole slew of different options here besides just the very basic one. All we're concerned about at this point is just the basic one. So again, it's going to be a filter, followed by a colon as you remember followed by this expression, which if it's a string it's going to start filtering on that string, filtering the array expression on that string. So let's go back to our code editor. And let's introduce the application we're actually going to be working with, which is, let's close those two. Which is index.html and app.js. Inside of index.html we have a simple ng-repeat, that basically looks over this shopping list. And if you look at app.js, the shopping list is nothing more than that same shopping list we've been working with before, it's just an array. So if we save that and go back to our browser and let's go back to the actual index.html instead of filter.html, you'll see that we have our shopping list here. Let's close the console, so here's our shopping list, that's that same shopping list we had before. Well, let's go back to our code editor and inside that HTML right above the actual list, we'll go ahead and create an input element with ng model being bound to a property that will create right now on the fly called search. So that's going to be our property. So now since this is an array, we can now filter this array using this search string right here. This is a two-way binding which means as we type the search property will get updated automatically. So we could say pipe, filter, that's the name of our filter, colon and then search. So now what's going to happen is that as I type in this field the filter will kick in automatically since all these things are registered with watchers inside a digest loop, and our shoppingList will automatically be filtered based on whatever the search string that we're providing through this input element. Let's go to our browser and see that in action, so here's our shopping list. And as we start typing for a sample, Bismol, you could see that Bismol's the only thing that showing up the three items. And if we go back as we erase, it's again getting bigger and bigger because we're filtering this on the fly. So if we just say milk, so milk is the only thing that's going to show up. So to go back to our code editor, you see that using the filter is doing basically the same thing that we've done in our filter.js file where it is using the search string to figure out whether or not an item in the shopping list array matches that search string. But since we're updating that search string using our two way binding the shoppingList entry repeat gets filtered on the fly. And this is the way we can have a user searchable list where the user just types in a search and the list automatically gets filtered based on that search. So let's summarize. We spoke about a special function called filter that exist on the array object. And what it does is it creates a new array, where each item of the new array satisfies some condition of a comparison function that is passed into the filter function itself. Now angular has a special filter called filter. Now it's a little repetitive but it represents the filter function we spoke about on the array object. Now provided the string as the first argument to that filter, that AngularJS filter function. It will filter the original collection or an array it supplied to matching all string items against the provided one that you're searching for. And as you saw in the code, we applied it using ng-repeat item in collection and then we filtered the collection by putting a pipe filter : searchString that is actually filtering our array That is signified by the collection. And as you can remember, we actually bound searchString to a textbox input element which allowed the user to type in whatever string they wanted into the textbox, and that string would be server as the searchString that would filter the collection of our ng-repeat. That way our ng-repeat would update the UI depending on what the person is typing in into that search box that translates into that property search string.
