Simple example of AngularJS filter
- 2021-07-06 09:53:00
- OfStack
AngularJS filter
Filters can be added to expressions and instructions using a pipe character ().
AngularJS filter
The AngularJS filter can be used to convert data:
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择1个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
Add a filter to an expression
Filters can be added to expressions with 1 pipe character () and 1 filter. .
(For the following two examples, we will use the person controller mentioned in the previous section))
The uppercase filter formats strings 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> Name is {{ lastName | uppercase }}</p>
</div>
<script src="personController.js"></script>
</body>
</html>
Run results:
Name is DOE
The lowercase filter formats strings 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> Name is {{ lastName | lowercase }}</p>
</div>
<script src="personController.js"></script>
</body>
</html>
Run results:
Name is doe
currency filter
The currency filter formats numbers in 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>
Run results:
Quantity: Price:
Total price = $9.99
Add a filter to an instruction
Filters can be added to instructions with 1 pipe character () and 1 filter.
The orderBy filter arranges arrays according to expressions:
AngularJS Example
<!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>
Run results:
Loop object:
Kai, Denmark Jani, Norway Hege, Sweden
Filter input
An input filter can be added to an instruction with a pipe character () and a filter followed by a colon and a model name.
The filter filter selects 1 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:
KAI, Denmark JANI, Norway HEGE, Sweden
The above is the knowledge of AngularJS filter collation, follow-up to continue to supplement, friends in need can refer to it.