| Newsletter |
AngularJS Filters – Java4s
In Angularjs filters can be used to format the data, format means changing the text/data to upper/lower case or capitalize the first letter and showing the numbers in currency format and many more.
Generally we can use filters in two ways..
- by adding to Expressions
- by Adding to Directives
Here are few familiar inbuilt angular filters which will be using in day to day projects
- uppercase > displays text in upper case
- lowercase > displays text in lower case
- currency > displays number in currency format
- limitTo > displays limited number of characters
- orderby > order the Array based on the given criteria or condition
- filter > filter can filter the array by selecting subset of array items (hope you will not understand this point 🙂 but no worries, I will explain in detail in the example bellow)
We have few other inbuilt filters; you can check them in Angular Docs.
Note: Filters can be added by using the pipe symbol ( | ), followed by a filter name.
Adding to Expressions
uppercase
uppercase > this will display text in upper case format.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="java4sApp" ng-controller="java4sCtrl">
Welcome to {{ name | uppercase }}
</div>
<script>
angular.module('java4sApp', [])
.controller('java4sCtrl', function($scope) {
$scope.name = "java4s"
});
</script>
</body>
</html>Output:
Welcome to JAVA4S
lowercase
lowercase > this will display text in lower case format.
Example:
<div ng-app="java4sApp" ng-controller="java4sCtrl">
Welcome to {{ name | lowercase }}
</div>
<script>
angular.module('java4sApp', [])
.controller('java4sCtrl', function($scope) {
$scope.name = "JAVA4S"
});
</script>
Output:
Welcome to java4s
currency
currency > this will display number in the currency format
Example:
<div ng-app="java4sApp" ng-controller="java4sCtrl">
Price is {{ price | currency }}
</div>
<script>
angular.module('java4sApp', [])
.controller('java4sCtrl', function($scope) {
$scope.price= "7"
});
</script>
Output:
Price is $7.00
limitTo
limitTo > displays limited number of characters
Example:
<div ng-app="java4sApp" ng-controller="java4sCtrl">
Name : {{ name | limitTo:4 }}
</div>
<script>
angular.module('java4sApp', [])
.controller('java4sCtrl', function($scope) {
$scope.name= "Java4s"
});
</script>
Output:
Name : Java
Adding to Directives
orderby
orderby > order the Array based on the given criteria or condition
Example:
<div ng-app="java4sApp" ng-controller="java4sCtrl">
<ul>
<li ng-repeat="detail in details | orderBy:'name'">
{{ detail.name + ' from ' + detail.country }}
</li>
</ul>
</div>
<script>
angular.module('java4sApp', [])
.controller('java4sCtrl', function($scope) {
$scope.details = [
{name:'Siva',country:'India'},
{name:'Teja',country:'United States'},
{name:'Kandula',country:'Canada'}
];
});
</script>
Output:
- Kandula, Canada
- Siva, India
- Teja, United States
filter
filter > filter can filter the array based on the given criteria, I am taking the same example again…
Example:
<div ng-app="java4sApp" ng-controller="java4sCtrl">
Filter : <input type = "text" ng-model = "country">
<ul>
<li ng-repeat = "detail in details | filter: country">
{{ detail.name + ' - ' + detail.country }}
</li>
</ul>
</div>
<script>
angular.module('java4sApp', []).controller('java4sCtrl', function($scope) {
$scope.details = [
{name:'Siva',country:'India'},
{name:'Teja',country:'United States'},
{name:'Kandula',country:'Canada'}
];
});
</script>
::. About the Author .:: | ||
 | ||
I got an idea after this explanation…thanks Sivateja Kandula……
Thanks for your easy explanation
Thank you
Nice explanation… Thanks, Shiva.