Filter in angularJs – Part 2

Before reading this article, I highly recommended reading my previous article on angularJS.

I am using my previous project so I am not going to do all these stuff like adding controller, view, js and bootstrap file in our project. You can find all the steps at Bind data on view using ng-repeat in angularJs.

I already discussed what filter is, currency, date and filter in my previous part of filter. In this part I am going to talk about json, limitTo, lowercase, number and uppercase filter in angularjs.

json: This json filter is nothing but it converts javascript object into json string. This filter has only one parameter which is optional. This parameter is for spacing.

<tr>
     <td colspan="6" style="padding-top:30px;">{{{'Name':'Pramod','Tech':'AngularJs','City':'Banglore'} | json:10}}</td>
</tr>

Output:

json-filter

limitTo: As name suggest this filter is used for limit. In above example we do have 8 records. I just want to show only 3 or 4 then I use this filter. This filter works for array, string as well as numbers.

<tr ng-repeat="data in dataList | limitTo:3">
                    <td><span ng-class="$odd?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>
                    <td>{{data.Name | uppercase }}</td>
                    <td>{{data.Email | lowercase }}</td>
                    <td>{{ConvertDate(data.Date) | date}}</td>
                    <td>{{ConvertDate(data.Date) | date:'fullDate'}}</td>
                    <td>{{data.Phone | currency :"INR-":2}}</td> 
                </tr>

Output:
limitTo-filter

lowercase: As name suggested this filter do convert all character in lowercase by applying this lowercase filter. I am just applying this filter on email. Let’s make changes and see the output.
Change to

<td ng-bind="data.Email"></td>

to

<td>{{data.Email | lowercase }}</td>

Output:
lowercase

number: This filter is just doing formatting of numbers which provide by us.

<!--start number filter-->
                <tr>
                    <td colspan="6" style="padding-top:30px;"><input type="text" ng-model="MyInput" /></td>
                </tr>
                <tr>
                    <td colspan="6" style="padding-top:30px;">{{MyInput|number}}</td>
                </tr>
                
                <!--end number filter-->

Output:

number-filter

uppercase: As name suggested this filter do convert all character in uppercase by applying this uppercase filter. I am just applying this filter on name. Let’s make changes and see the output.
Change to

<td ng-bind="data.Name"></td>

to

<td>{{data.Name | uppercase }}</td>

Output:
uppercase

Hope this article is helpful.


profile for Pramod C# Corner - A Social Community of Developers and Programmers

Tags: , , , , , ,