Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thread Contributor: Ravishankar ChavarePart 7.1 -Built in Filter in angularJS
#1
we already learnt what is filter how to use it today we will learn some of basic built in filters if you know more about filters read Here.

Built in filters means angularJS file already defined some filters called builtin filters.

1.uppercase
2.lowercase.
3.filter.
4.json.
5.limitTo.
6.currency.
7.date.
8.number
9.orderBy


1.filter:


-filter select a subset of items from an given input array.
-filter are only executed when there input have changed.
-you can add any filter to combine with expression or directives


Example:
Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="../angular.min.js"></script>
    <title>search filter</title>
    <script type="text/javascript">
    var app=angular.module("myApp",[]);
        app.controller("myController",function($scope){
                $scope.data=[
                { 'name':'ajay','mobile':'123456789'},
                { 'name':'rahul','mobile':'4545455454'},
                { 'name':'amit','mobile':'454545445'},
                { 'name':'anant','mobile':'67686868668'},
                { 'name':'akbar','mobile':'68686878'},
                { 'name':'ranjit','mobile':'45454545'},
                { 'name':'sagar','mobile':'23232323232'},
                { 'name':'vikas','mobile':'8989898989'},
                { 'name':'shubham','mobile':'7888989899'}
                ]
        });
    </script>
</head>
<body>
<div ng-controller="myController">
<input type="text" name="searchbox" ng-model="search">
    <table border="1">
        <thead>
            <tr>
                <td>Name</td>
                <td>Mobile</td>
            </tr>
        </thead>
    <tbody>
        <tr ng-repeat="data1 in data | filter:search">
            <td>{{data1.name}}</td>
            <td>{{data1.mobile}}</td>
        </tr>
    </tbody>
    </table>
</div>
</body>
</html>


you can use a specific coloumn to search use syntax

Code:
<input ng-model="search.coloumn_name">


Example:
Code:
<input type="text" name="searchbox" ng-model="search.mobile">


apply this model to ng-repeat as shows:
Code:
<tr ng-repeat="data1 in data | filter:search">

-search is the model object here.
-mobile is coloumn name.
-You can also enter mannually value instead of search in filter 


2.lowercase:


-all content of expression converted to lowercase
In HTMl we can bind 
Code:
{{expression | lowercase}}

Example:
Code:
{{data1.name | lowercase}}

Output:

[Image: Qv14HSP.png]

In Javascript 

Code:
$filter('lowercae')()



3.uppercase:


-all content of expression converted to uppercase

In HTMl we can bind 
Code:
{{expression | uppercase}}

Example:
Code:
{{data1.name | uppercase}}

Output:
[Image: jnwWuLH.png]
In Javascript 
Code:
$filter('uppercase')()

4.limitTO:

-create a new array of string containing only a specified number of elements.
-the elements are taken from either the beginning or the end of any array.

Syntax:
Code:
{{expression | lomitTO:limit:begin}}



5.currency:

-the currency filter formats a number to a currency format.
-By default locale currency format is used

Syntax:

Code:
{{number | currency:symbol:fractionsize}}


Example:
Code:
<div ng-controller="myController">
<br>Before Filter apply<br>
{{10.0443}}

<br>After <b>currency</b>  Filter apply <br>
{{10.0443 | currency:"$":2}}
<br>
-$ is used for display currency<br>
-2 is used to print out only 2 decimal point result
</div>

OUTPUT:
[Image: cSd0Z63.png]

6.orderBy:

-orderBy filter is used to sorting an array in two direction that is ascending and descending.
-By default orderBy filter sort the data in ascending manner
-To sort data in descending order use (-) before the key value


Syntax:
Code:
{{array| orderBy:expression:reverse}}

-expression is used to determine the order type that string,function,array;
-reverse is the optional set it true if you want to reverse the order of array


Example:
Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="../angular.min.js"></script>
    <title>search filter</title>
    <script type="text/javascript">
    var app=angular.module("myApp",[]);
        app.controller("myController",function($scope){
            $scope.cities=[{ 'name':'ajay','city':'pune'},
                { 'name':'rahul','city':'latur'},
                { 'name':'amit','city':'aurangabad'},
                { 'name':'anant','city':'delhi'}
            ]
        });
    </script>
</head>
<body>
Original output
<div ng-controller="myController">
<ul>
<li ng-repeat="data in cities">{{data.city}}
</li>
</ul>
</div>
<br>
After sorting 
<div ng-controller="myController">
<ul>
<li ng-repeat="data in cities| orderBy:'city'">{{data.city}}
</li>
</ul>
</div>
</body>
</html>

OUTPUT:
[Image: ozwRvZh.png]
For reverse order or descending just add(-) befor the key as follows
Code:
<li ng-repeat="data in cities| orderBy:'-city'">{{data.city}}

OUTPUT:
[Image: 7sQnQWW.png]

7.date:
-The date filter format a date to a specified format.
-By default the format of the date is "MMM d,y" Example (Jan 10,2018).


Syntax:

Code:
{{date| date:format:timezone}}

format-optional,

yyyy-2018
yy-18
y-2018

MMMM-January
MMM-Jan
MM-01
M-1

dd-10

timezone:optional,
used to format the date according to timezone


Example:
Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="../angular.min.js"></script>
    <title>search filter</title>
    <script type="text/javascript">
    var app=angular.module("myApp",[]);
        app.controller("myController",function($scope){
            $scope.today=new Date();
        });
    </script>
</head>
<body>
Original output
<div ng-controller="myController">
{{today}}
</div>
<br>

After applying <b>date</b> filter
<div ng-controller="myController">
{{today | date}}
</div>
<br>

After applying custom <b>date</b> filter
<div ng-controller="myController">
{{today | date:"dd-mm-y"}}
</div>
<br>

</body>
</html>

OUTPUT:
[Image: gpHoIsZ.png]


8.number:
-If the input is null or undefined it will just be returned
-If the input is infinite it will returned ꝏ symbol
-If the input is not number an empty string is returned


Syntax:

Code:
{{number_expression| number:fractionsize}}


Example:
Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="../angular.min.js"></script>
    <title>search filter</title>
    <script type="text/javascript">
    var app=angular.module("myApp",[]);
        app.controller("myController",function($scope){
            $scope.sallery=1501515;
        });
    </script>
</head>
<body>
Original output
<div ng-controller="myController">
{{sallery}}
</div>
<br>

After filter applied
<div ng-controller="myController">
{{sallery|number}}
</div>
<br>
</body>
</html>

OUTPUT:
[Image: GZOD97v.png]



9.json:
Display a javascript object as json string.

Example:
Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="../angular.min.js"></script>
    <title>search filter</title>
    <script type="text/javascript">
    var app=angular.module("myApp",[]);
        app.controller("myController",function($scope){
            $scope.javaobject={'name':'protutr','website':'protutr.com'};
        });
    </script>
</head>
<body>

After filter applied
<div ng-controller="myController">
{{javaobject|json}}
</div>
<br>
</body>
</html>

OUTPUT:
[Image: LRWAEwy.png]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)