AngularJS
allow Filters to format data . There are several type of filter ,
that can be used in AngularJS
. Following are the list of filter inbuilt in the AngularJS .A filter
can be customised also.
Currency
: Number is formatted to currency .
Date
: Date is formatted to specific format.
Filter
: Select a part of items from an array.
Json
: object is formatted to JSON string .
LimitTo
: Limits an array / string, into a given number of limit.
Lowercase
: String is formatted to lower case .
Number
: Number is formatted to string .
OrderBy
: Orders an array by an expression.
Uppercase
: Format string to upper case.
Filters is added by pipe character | followed by a filter.
The output will be formatted into lower case .lowercase filter added after a pipe character (|) followed by expression.
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
</head>
<script>
angular.module('myApp',
[]).controller('myControl',
function
($scope) {
$scope.Country
=
[
{
country: 'India'
},
{
country: 'Pakistan'
},
{
country: 'USA'
},
{
country: 'Chaina'
},
{
country: 'Brazil'
},
{
country: 'Canada'
},
{
country: 'England'
},
{
country: 'Norway'
},
{
country: 'Sweden'
},
{
country: 'Denmark'
},
{
country: 'Korea'
}
];
});
</script>
<body>
<div
ng-app="myApp"
ng-controller="myControl">
<div
ng-repeat="obj
in Country ">
<span>{{obj.country|lowercase
}}</span><br>
</div>
</div>
</body>
</html>
Output:
india
pakistan
usa
chaina
brazil
canada
england
norway
sweden
denmark
korea
An Example of uppercase
The output will be formatted into upper case.uppercase filter added
after a pipe character (|) followed by expression.
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
angular.module('myApp',
[]).controller('myControl',
function
($scope) {
$scope.Country
=
[
{
country: 'India'
},
{
country: 'Pakistan'
},
{
country: 'USA'
},
{
country: 'Chaina'
},
{
country: 'Brazil'
},
{
country: 'Canada'
},
{
country: 'England'
},
{
country: 'Norway'
},
{
country: 'Sweden'
},
{
country: 'Denmark'
},
{
country: 'Korea'
}
];
});
</script>
<body>
<div
ng-app="myApp"
ng-controller="myControl">
<div
ng-repeat="obj
in Country ">
<span>{{obj.country|uppercase
}}</span><br>
</div>
</div>
</body>
</html>
Output:
INDIA
PAKISTAN
USA
CHAINA
BRAZIL
CANADA
ENGLAND
NORWAY
SWEDEN
DENMARK
KOREA
An Example of OrderBy and LimitTo
The output will be arranged by population ascending and descending order.
orderBy filter added after a pipe character (|) followed by expression.
Another filter added limitTo follwed by orderBy filter.Note that multiple filter can be added separated by | character.
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
angular.module('myApp',
[]).controller('myControl',
function
($scope) {
$scope.Country
=
[
{
country: 'India',population
:100 },{
country: 'Pakistan'
, population :18 },
{
country: 'USA',population
:30 },{
country: 'Chaina',
population: 140 },
{
country: 'Brazil',
population: 10 },{
country: 'Canada',
population: 5 },
{
country: 'England',
population: 20 },{
country: 'Norway',
population: 2 },
{
country: 'Sweden',
population: 3 },{
country: 'Denmark',
population: 4 },
{
country: 'Korea',
population: 40 }
];
});
</script>
<body>
<div
ng-app="myApp"
ng-controller="myControl">
<span><I>Display
Name and Population of Country Order by Population Asceding
Order</I> </span>
<div
ng-repeat="obj
in Country |orderBy:'population'">
<span>{{obj.country|uppercase
}}-{{obj.population}}</span><br>
</div>
<span><I>Display
Name and Population of Country Order by Population Desc
Order</I></span>
<div
ng-repeat="obj
in Country |orderBy:'-population'">
<span>{{obj.country|uppercase
}}-{{obj.population}}</span><br>
</div>
<span><I>Display
Name and Population of Country Order by Population Asceding Order
With limit 3</I></span>
<div
ng-repeat="obj
in Country |orderBy:'population'| limitTo : 3">
<span>{{obj.country|uppercase
}}-{{obj.population}}</span><br>
</div>
</div>
</body>
</html>
Display Name and Population of Country Order by Population Asceding Order
NORWAY-2
SWEDEN-3
DENMARK-4
CANADA-5
BRAZIL-10
PAKISTAN-18
ENGLAND-20
USA-30
KOREA-40
INDIA-100
CHAINA-140
Display Name and Population of Country Order by Population Desc Order
CHAINA-140
INDIA-100
KOREA-40
USA-30
ENGLAND-20
PAKISTAN-18
BRAZIL-10
CANADA-5
DENMARK-4
SWEDEN-3
NORWAY-2
Display Name and Population of Country Order by Population Asceding Order With limit 3
NORWAY-2
SWEDEN-3
DENMARK-4
An Example of Filter
This filter match part of string .Here the filter is bind with a input textbox . Depending on textbox
input , the data will be filter .
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
angular.module('myApp',
[]).controller('myControl',
function
($scope) {
$scope.Country
=
[
{
country: 'India'
},
{
country: 'Pakistan'
},
{
country: 'USA'
},
{
country: 'Chaina'
},
{
country: 'Brazil'
},
{
country: 'Canada'
},
{
country: 'England'
},
{
country: 'Norway'
},
{
country: 'Sweden'
},
{
country: 'Denmark'
},
{
country: 'Korea'
}
];
});
</script>
<body>
<div
ng-app="myApp"
ng-controller="myControl">
<input
type="text"
ng-model="myFilterString"
/>
<div
ng-repeat="obj
in Country | filter : myFilterString">
<span>{{obj.country|uppercase
}}</span><br>
</div>
</div>
</body>
</html>
An Example of Custom Filter
A filter can be curtomised.Below filter return the object , which contain chracter 'a'
A filter can be curtomised.Below filter return the object , which contain chracter 'a'
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
angular.module('myApp',
[]).controller('myControl',
function
($scope) {
$scope.Country
=
[
{
country: 'India'
},
{
country: 'Pakistan'
},
{
country: 'USA'
},
{
country: 'Chaina'
},
{
country: 'Brazil'
},
{
country: 'Canada'
},
{
country: 'England'
},
{
country: 'Norway'
},
{
country: 'Sweden'
},
{
country: 'Denmark'
},
{
country: 'Korea'
}
];
$scope.myFilter
= function
(item) {
var
str = item.country;
var
n = str.indexOf("a");
if
(n > 0)
return
item;
};
});
</script>
<body>
<div
ng-app="myApp"
ng-controller="myControl">
<div
ng-repeat="obj
in Country | filter : myFilter ">
<span>{{obj.country|uppercase
}}</span><br>
</div>
</div>
</body>
</html>
INDIA
PAKISTAN
CHAINA
BRAZIL
CANADA
ENGLAND
NORWAY
DENMARK
KOREA
No comments:
Post a Comment