Filters can be applied to an expression name followed by "|" symbol. You can apply multiple filters to the same expression.
<!DOCTYPE html>
<html ng-app="filterModule">
<head>
<script type="text/javascript"
src="lib/angularjs.min.js"></script>
</head>
<body>
<div ng-controller="FilterController">
<h4>orderBy Filter</h4>
<div class="filterDemos">
<table>
<thead>
<th>Name</th>
<th>Designation</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees | orderBy:'name'">
<td>{{employee.name}}</td>
<td>{{employee.designation}}</td>
</tr>
</tbody>
</table>
</div>
<h4>limitTo Filter</h4>
<div class="filterDemos">
<table>
<thead>
<th>Name</th>
<th>Designation</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees | limitTo:5">
<td>{{employee.name}}</td>
<td>{{employee.designation}}</td>
</tr>
</tbody>
</table>
</div>
<h4>lowercase and uppercase Filter</h4>
<div class="filterDemos">
<table class="table table-hover table-bordered table-striped">
<thead>
<th>Name</th>
<th>Designation</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.name | uppercase}}</td>
<td>{{employee.designation | lowercase}}</td>
</tr>
</tbody>
</table>
<img src="img/angularjs_filters_3.png"/>
</div>
<h4>search Filter</h4>
<div class="filterDemos">
<p>Search: <input type="text" ng-model="searchText"/></p>
<table>
<thead>
<th>Name</th>
<th>Designation</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchText">
<td>{{employee.name}}</td>
<td>{{employee.designation}}</td>
</tr>
</tbody>
</table>
</div>
<h4>currency Filter</h4>
<div class="filterDemos">
<p>Enter Amount: <input type="text" ng-model="amount"/></p>
<p>Amount with default currency <span style="color:red">{{amount | currency}}</span></p>
<p>Amount with Indian currency <span style="color:red">{{amount | currency: "Rs."}}</span></p>
</div>
<h4>number Filter</h4>
<div class="filterDemos" style="text-align:center">
<p>Enter Number: <input type="text" ng-model="number"/></p>
<h5>Rounded number with no decimal places: <span style="color:red">{{number | number:0}}</span></h5>
<h5>Number with 4 decimal places <span style="color:red">{{number | number:4}}</span></h5>
</div>
<h4>date Filter</h4>
<div class="filterDemos">
<h5>Format equivalent to 'M/d/yy h:mm a' for en_US locale <span style="color:red">{{ 1288323623006 | date:'short'}}</span></h5>
<h5>Format equivalent to 'MM/dd/yyyy @ h:mma' <span style="color:red">{{ 1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span></h5>
</div>
</div>
<script type="text/javascript">
var filterModule = angular.module('filterModule', []);
filterModule.controller('FilterController', function($scope) {
$scope.amount='100';
$scope.number='1234.5678';
$scope.employees=[{ name:'Priya',designation:'Manager'},
{ name:'Naveen',designation:'Tester'},
{ name:'Anita',designation:'Programmer'},
{ name:'Mike',designation:'BA'},
{ name:'John',designation:'Admin'},
{ name:'Alice',designation:'Tester'},
{ name:'Gracia',designation:'Senior Manager'}];
});
</script>
</body>
</html>
We have a model with employee details and we have used angularjs filters to format the data being displayed in the view.
Output
{ "name": "value" }
orderBy
orderBy filter can be used to sort an array of items.
1 | <!-- To sort in ascending order --> |
2 | <tr ng-repeat="employee in employees | orderBy:'name'"> |
3 | <!-- To sort in descending order --> |
4 | <tr ng-repeat="employee in employees | orderBy:'name':true"> |
limitTo
limitTo filter can be used to limit the number of items to be displayed in an array of items.
1 | <tr ng-repeat="employee in employees | limitTo:5"> |
lowercase & uppercase
Transforms text to lowercase or uppercase.
1 | <tr ng-repeat="employee in employees"> |
2 | <td>{{employee.name | uppercase}}</td> |
3 | <td>{{employee.designation | lowercase}}</td> |
4 | </tr> |
filter
Enables search through an array of items.
1 | <input type="text" ng-model="searchText"/> |
2 | <tr ng-repeat="employee in employees | filter:searchText"> |
currency
Adds currency symbol to a given number. When no currency symbol is provided, the default symbol for current locale is used.
1 | <span>{{amount | currency}}</span> |
2 | <span>{{amount | currency: "Rs."}}</span> |
number
This can be used to format number values - rounds a decimal number, makes it a negative number, fix number of decimal places to display.
1 | <h5>Rounded number with no decimal places: {{number | number:0}}</h5> |
2 | <h5>Number with 4 decimal places :{{number | number:4}}</h5> |
date
Formats date in various formats. You can find various date formats here.
1 | <h5>Format equivalent to 'M/d/yy h:mm a' for en_US locale{{ 1288323623006 | date:'short'}}</h5> |
2 | <h5>Format equivalent to 'MM/dd/yyyy @ h:mma'{{ 1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</h5> |
json
Converts javascript objects to json.
1 | <pre>{{ {'name':'value'} | json }}</pre> |
Output
{ "name": "value" }
No comments:
Post a Comment