AngularJS内置过滤器示例
时间：2020-02-23 14:29:32 来源:igfitidea点击:
在本教程中，我们将看到AngularJS Inbuilt过滤器示例。
我们需要多次以其他格式显示输出数据。
例如：我们需要使用数字显示货币。
AngularJS为此目的提供了许多内置过滤器。
AngularJS过滤器用于格式化视图中的数据。
"|"符号用于应用过滤器。
AngularJS滤波器可以以两种方式应用
- 关于AngularJS指令
- 在AngularJS表达式上
让我们在这里看到一些内置过滤器。
过滤表达式
uppercase
此过滤器用于将文本的格式更改为大写。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.theitroadMsg = "Hello from theitroad";
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
</br>
{{theitroadMsg|uppercase}} !!!
</div>
</body>
</html>
lowercase
此过滤器用于将文本的格式更改为小写。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.theitroadMsg = "Hello from theitroad";
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
</br>
{{theitroadMsg|lowercase}} !!!
</div>
</body>
</html>
currency
此过滤器用于将编号格式化为货币。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.cost= 500;
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
</br>
Cost is {{cost|currency}}
</div>
</body>
</html>
limitTo
Limitto用于显示有限数量的字符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.theitroadMsg = "Hello from theitroad";
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
</br>
{{theitroadMsg | limitTo:5}} !!!
</div>
</body>
</html>
date
日期用于格式化特定格式的日期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.date = (new Date()).getTime() ;
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
Today 's date : {{date | date:'dd/MM/yyyy'}}
</div>
</body>
</html>
筛选指令
orderby
此过滤器用于按表中的列排序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.countries=
[
{"name": "San Franceco" , "capital" : "delhi"},
{"name": "England" , "capital" : "London"},
{"name": "France" , "capital" : "Paris"},
{"name": "Japan" , "capital" : "Tokyo"}
];
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Captial</th>
</tr>
</thead>
<tr ng-repeat="con in countries | orderBy:'name'">
<td>{{ con.name }}</td>
<td>{{ con.capital }}</td>
</tr>
</table>
</br>
</div>
</body>
</html>
Filter：
它用于过滤来自数组或者列表的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.countries=
[
{"name": "San Franceco" , "capital" : "delhi"},
{"name": "England" , "capital" : "London"},
{"name": "France" , "capital" : "Paris"},
{"name": "Japan" , "capital" : "Tokyo"}
];
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
Filter : <input type = "text" ng-model = "country.name">
</br>
</br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Captial</th>
</tr>
</thead>
<tr ng-repeat="con in countries | filter: country">
<td>{{ con.name }}</td>
<td>{{ con.capital }}</td>
</tr>
</table>
</div>
</body>
</html>
