Angularjs Filters
Advertisements
Angularjs Filters
Filter are mainly used for modify the data. Filters can be added to expressions and directives using a pipe (|) character. Following Filter are use in AngularJs;
| S.No. | Name | Description |
|---|---|---|
| 1 | uppercase | converts a text to upper case text. |
| 2 | lowercase | converts a text to lower case text. |
| 3 | currency | formats text in a currency format. |
| 4 | filter | filter the array to a subset of it based on provided criteria. |
| 5 | orderBy | orders the array based on provided criteria. |
uppercase
uppercase filter are used for converting lower case text to upper case text. It is use to expression with pipe character.
Example
<div ng-app="" ng-controller="personController">
Enter first name:<input type="text" ng-model="name"><br/>
<p>The name is {{ name | uppercase }}</p>
</div>
<script>
function personController($scope) {
$scope.name="Porter"
}
</script>
Example
Enter first name:
The name is {{ name | uppercase }}
lowercase
lowercase filter are used for converting upper case text to lower case text. It is use to expression with pipe character.
Example
<div ng-app="" ng-controller="personController">
Enter first name:<input type="text" ng-model="name"><br/>
<p>The name is {{ name | lowecase }}</p>
</div>
<script>
function personController($scope) {
$scope.name="PORTER"
}
</script>
currency
Add currency filter to an expression returning number using pipe character. Below we print total cost of items.
Example
<div ng-app="" ng-controller="personController">
<input type="number" ng-model="quantity"><br />
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
<script>
function personController($scope) {
$scope.quantity=10;
$scope.price=1;
}
</script>
Google Advertisment