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.

angular js code

ng repeat with 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

apply filter

using filter

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.

filter and number filter

number filter

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.

test to 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:

search in array

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.

date filter
date wise filter

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.

limit to

Example: limitTo filter with all elements.

limit to filter with all element
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.

array element

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:

json filter

example of json filter

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:

 json filter examples

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

custom filter

custom filter for upper case

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.


Similar Articles