Angular JS: Filtering Array

In the last post we have seen how to apply filters in Angular JS. In this post we will be pushing filters a little bit further and see how to apply filters onto arrays.

To start, we will be creating a controller which will have a controller of must read newspapers and magazines.

Now to display this onto the screen, we have the following code:

Now let’s add some more spice to this program by adding more requirements. Let’s add a text box above this list and filter the content of the list as per the text mentioned in the textbox. So for example, if textbox says “Fo”, the list should display “Forbes”.

Following is the code that will do that for us:

 

So, the filter is bind with the text in the textbox, thus it will filter the list accordingly. Here is what the output of the program would be.

Without filter:

With filter:

Hope you would like the post. Stay tuned for more.

Happy Reading.