- AngularJS has built-in filter for using in expression.
- The filters are json,limitTo,oderBy,date,number,currency,lowercase and uppercase.
- In this demo, "We will see the use of these built-in filter in AngularJS application".
- Below code has the illustration of these filter with sample example.
<!DOCTYPE html> <html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.js"></script>
<meta charset="utf-8">
<title>AngularJS Buit-In Filter Example</title>
</head>
<body ng-controller="MyController">
<h3>currency filter with fraction</h3> {{price | currency:'USD$ '}}
<h3>currency filter without fraction</h3> {{price | currency:'USD$ ':0}}
<h3>currency filter with 1 fraction</h3> {{price | currency:'USD$ ':1}}
<h3>lowercase filter</h3> {{name | lowercase}}
<h3>uppercase filter</h3> {{name | uppercase}}
<h3>date filter</h3> {{birthDay | date:'dd/MM/yyyy'}}
<h3>number filter</h3> {{rollNumaber | number:2}}
<h3>json filter</h3> {{studentObject | json}}
<h3>limitTo filter</h3>
<input type="number" ng-model="limitNimber" placeholder="Enter Limit Number">
<br/> Fruit Array : {{fruitArray|limitTo:limitNimber}}
<h3>orderBy filter</h3> Fruit orderBy : {{fruitArray|orderBy:reverse}}
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.price = 53243452.40;
$scope.name = "Sandeep Kumar Patel";
$scope.birthDay = "1415977691197";
$scope.rollNumaber = 5;
var Student = function(name, subject) {
this.name = name;
this.subject = subject;
};
$scope.studentObject = new Student("Sandeep", "Computer");
$scope.limitNimber = 5;
$scope.fruitArray = ["Apple", "Mango", "Grapes", "Orange", "Banana"];
}]);
</script>
</body>
</html>
- The output of the above code is embedded in below JSBIN link.
