Filters in AngularJS
1. Filter :
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="spicyCtrl">
Search by Spices name:<input ng-model="query" type="text" />
<div>
<li ng-repeat="spice in spices | filter : query">
{{spice.name}} and its spiciness {{spice.spiciness}}
</li>
</div>
<script>
function spicyCtrl($scope){
$scope.spices = [{"name":"pasilla", "spiciness":"mild"},
{"name":"jalapeno", "spiciness":"hot hot hot!"},
{"name":"habanero", "spiciness":"LAVA HOT!!"}];
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
In the above example we are filtering list on typing in textbox declared above.
2. Order By filter:
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="spicyCtrl">
Search by Spices name:<input ng-model="query" type="text" />
<div>
<li ng-repeat="spice in spices | filter : query | orderBy:'name'">
{{spice.name}} and its spiciness {{spice.spiciness}}
</li>
</div>
<script>
function spicyCtrl($scope){
$scope.spices = [{"name":"Mango", "spiciness":"mild"},
{"name":"hfg", "spiciness":"hot hot hot!"},
{"name":"gfh", "spiciness":"LAVA HOT!!"}];
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Order by filter is used for order the list of items in ascending and descending order.
3. Uppercase and LowerCase Filter:
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="spicyCtrl">
Search by Spices name:<input ng-model="query" type="text" />
<div>
<li ng-repeat="spice in spices | filter : query | orderBy:'name'">
{{spice.name | uppercase}} and its spiciness {{spice.spiciness | lowercase}}
</li>
</div>
<script>
function spicyCtrl($scope){
$scope.spices = [{"name":"pasilla", "spiciness":"mild"},
{"name":"jalapeno", "spiciness":"hot hot hot!"},
{"name":"habanero", "spiciness":"LAVA HOT!!"}];
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Uppercase and Lowercase is used for converting value to uppercase and lowercase whatever you want.
4.Currency Filter:
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="spicyCtrl">
Search by Spices name:<input ng-model="query" type="text" />
<div>
<li ng-repeat="spice in spices | filter : query | orderBy:'name'">
{{spice.name | uppercase}} and its spiciness {{spice.spiciness | lowercase}} and its price per KG {{spice.price| currency}}
</li>
</div>
<script>
function spicyCtrl($scope){
$scope.spices = [{"name":"pasilla", "spiciness":"mild","price":"12"},
{"name":"jalapeno", "spiciness":"hot hot hot!","price":"15"},
{"name":"habanero", "spiciness":"LAVA HOT!!","price":"30"}];
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Currency filter is used for assigning currency to any price.
5. JSON filter:
<html ng-app="">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="spicyCtrl">
Search by Spices name:<input ng-model="query" type="text" />
<div>
<li ng-repeat="spice in spices | filter : query | orderBy:'name'">
{{spice.name | uppercase}} and its spiciness {{spice.spiciness | lowercase}} and its price per KG {{spice.price| currency}}
</li>
</div>
<br />
<br />
<div>
{{spices|json}}
</div>
<script>
function spicyCtrl($scope){
$scope.spices = [{"name":"pasilla", "spiciness":"mild","price":"12"},
{"name":"jalapeno", "spiciness":"hot hot hot!","price":"15"},
{"name":"habanero", "spiciness":"LAVA HOT!!","price":"30"}];
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
result:
[ { "name": "pasilla", "spiciness": "mild", "price": "12" }, { "name": "jalapeno", "spiciness": "hot hot hot!", "price": "15" }, { "name": "habanero", "spiciness": "LAVA HOT!!", "price": "30" } ]
In this json filter it return json result of any object passed to that expression. Like above result.
