AngularJS filter
Filters can be added to expressions and directives using a pipe character (|).
AngularJS filter
AngularJS filters can be used to convert data:
| Filter | describe |
|---|---|
| currency | Format numbers into currency format. |
| filter | Select a subset from the array item. |
| lowercase | Format strings are lowercase. |
| orderBy | Arrange arrays according to an expression. |
| uppercase | The formatted string is capitalized. |
Add filters to expressions
Filters can be added to expressions via a pipe character (|) and a filter. .
((In the following two examples, we will use the person controller mentioned in the previous chapter))
The uppercase filter formats the string to uppercase:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="personCtrl"><p>The name is {{ lastName | uppercase }}</p></div><script src="personController.js"></script></body></html>Running results:
Name DOE
The lowercase filter formats the string to lowercase:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="personCtrl"><p>The name is {{ lastName | lowercase }}</p></div><script src="personController.js"></script></body></html>Running results:
Named doe
currency filter
The currency filter formats the numbers into currency format:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="costCtrl">Quantity: <input type="number" ng-model="quantity">Price: <input type="number" ng-model="price"><p>Total price= {{ (quantity * price) | currency }}</p></div><script>var app = angular.module('myApp', []);app.controller('costCtrl', function($scope) { $scope.quantity = 1; $scope.price = 9.99;});</script></body></html>Running results:
quantity: price:
Total price = $9.99
Add filters to directives
Filters can be added to directives via a pipe character (|) and a filter.
The orderBy filter arranges arrays according to expressions:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="namesCtrl"><p>Loop object:</p><ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li></ul></div><script src="namesController.js"></script></body></html>Running results:
Loop object:
Filter input
The input filter can be added to the directive by a pipe character (|) and a filter followed by a colon and a model name.
The filter filter selects a subset from the array:
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="namesCtrl"><p>Input filtering:</p><p><input type="text" ng-model="test"></p><ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li></ul></div><script src="namesController.js"></script></body></html>Running effect:
Input filtering:
The above is a summary of the knowledge about AngularJS filters. We will continue to add them later. Friends who need it can refer to it.