AngularJS Application: Part 3

Before reading this article, I highly recommend reading the previous parts:

1. AngularJS First Application: Part 1
2. AngularJS Application: Part 2

As we saw in our previous article we used ng-init, ng-repeat and AngularJS objects. But when we saw that the ng-repeat output was unordered, in other words the same order as as we assigned the value in the object, the output was not in that form. So here we will talk about some AngularJS filters and we will use these filters on an Array.

In the preceding snapshot as you can see we got a list of an array, but if you can see the Names are not in Orders. So if we want to make it in order then we will use AngularJS filters.

Since there are many kinds of filters like:

SNo	Filters	Description
1	currency	a number to currency format.
2	date	Format date to a string as per request.
3	filter	Select a subset of items from an Array.
4	json	Convert JavaScript object to JSON string.
5	limitTo	To Creates a new array or string containing only a specified number of elements.
6	lowercase	Format all the alphabet in lowercase
7	number	Format how many numbers of decimals we want to use.
8	uppercase	Format all the alphabet in uppercase
9	orderBy	Order an array by expression
10	custom filter	User defined filters (like you can create your own uppercase filter.

Since we will apply some filters from the list in the above table and for the rest of the filters we will use other examples. We will apply these filters in this example:

currency 6. lowercase 8. uppercase 9. orderBy





In the above snapshots we have used four filters, as you can see in the highlighted area in the picture.

Currency: Here I am only explaining the currency filter and I hope you are very familiar with the rest of the filters. When we use the currency filter then the number is automatically converted into the Amount format. And the currency filter by default uses the ($) dollar notation.

Filter and Number filters: Now we will use a filter and number filters, as we know a filter will select the subset of items and a number will decide how many decimal points we want. Let's see that.





We saw in the snapshots above that we specified number:3. That means that after the decimal there would be 3 digits. Now to test to the filter.



As I enter any value in the TextBox it searches in all the arrays and that was a matching subset. It returns that to me. It is not that it will match only from the "Name" Column. It will match in all columns, just have a look:



As I entered "No" it matches from the City column and returned me the matching list.

Now we will move to the rest of the filters like: date, limitTo, json and custom filter.

Date: Date filter is basically used to format a date to a string format, as you can see below.




You can see there are some builtin and user-defined date filters. As the same you can use any other format.

LimitTo: LimitTo filter actually sets the limit from the number of items to be repeated. Like if I wrote.
limitTo: 3 then only 3 items will display. In other words it sets the limit on an array.



Example: limitTo filter with all elements.


In the snapshot above we used an array and display all the array elements. And in the following snapshots we used limitTo filter to 3, that is showing three elements of the Array.



Json filter: It is a great way to determine what the data binding is, by using the JSON filter that allows you to print an object as a JSON response. So if we add the following HTML code just below our form:





In the snapshots above you saw, I bound the hardcoded values and as we run the application it gives me output in JSON format. Now I used two text boxes and whatever I enter into the text boxes will be displayed to me in JSON format. Please look at the following snapshots:



Custom Filter: Here we simply created a custom filter for UpperCase. In a similar manner you can create your own custom filter.





In the snapshot above you can see some different code that could be new to you. Don't think so much, since future articles will make you very handy with this stuff.

Thanks, suggestions will be highly considered.