本文概述
在AngularJS中,过滤器用于格式化数据。以下是用于转换数据的过滤器列表。
过滤 | 描述 |
---|---|
Currency | 它将数字格式化为货币格式。 |
Date | 它将日期格式化为指定的格式。 |
Filter | 它从数组中选择项的子集。 |
Json | 它将对象格式化为Json字符串。 |
Limit | 它用于将数组/字符串限制为指定数量的元素/字符。 |
Lowercase | 它将字符串格式化为小写。 |
Number | 它将数字格式化为字符串。 |
Orderby | 它通过表达式对数组进行排序。 |
Uppercase | 它将字符串格式化为大写。 |
如何向表达式添加过滤器
你可以使用竖线字符|,然后是过滤器,将过滤器添加到表达式中。
在此示例中,大写过滤器将字符串格式化为大写:
请参阅以下示例:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "Sonoo", $scope.lastName = "Jaiswal"
});
</script>
</body>
</html>
让我们将小写过滤器应用于同一示例:
请参阅以下示例:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "Sonoo", $scope.lastName = "Jaiswal"
});
</script>
</body>
</html>
如何将过滤器添加到指令
可以使用管道字符|将过滤器添加到指令(例如ng-repeat),然后使用过滤器。
让我们举个例子:
在此示例中,orderBy过滤器用于对数组进行排序。
请参阅以下示例:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Ramesh', country:'India'}, {name:'Alex', country:'USA'}, {name:'Pooja', country:'India'}, {name:'Mahesh', country:'India'}, {name:'Iqbal', country:'Pakistan'}, {name:'Ramanujam', country:'India'}, {name:'Osama', country:'Iraq'}, {name:'Johnson', country:'UK'}, {name:'Karl', country:'Russia'}
];
});
</script>
</body>
</html>
过滤器
筛选器筛选器只能在数组上使用,因为它会选择数组的一个子集。它返回仅包含匹配项的数组。
让我们举个例子:
本示例将返回包含字母“ o”的名称。
请参阅以下示例:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'o'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Ramesh', 'Pooja', 'Mahesh', 'Ramanujam', 'Osama', 'Iqbal', 'Karl', 'Johnson', 'Alex'
];
});
</script>
<p>This example displays only the names containing the letter "o".</p>
</body>
</html>
根据用户输入过滤数组
通过在输入字段上设置ng-model指令,可以将输入字段的值用作过滤器中的表达式。
请参阅以下示例:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Ramesh', 'Pooja', 'Mahesh', 'Ramanujam', 'Osama', 'Iqbal', 'Karl', 'Johnson', 'Alex'
];
});
</script>
<p>The list will only contain the names matching the filter.</p>
</body>
</html>
根据用户输入对数组排序
你可以根据表列对数组进行排序。
请参阅以下示例:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Ramesh', country:'India'}, {name:'Alex', country:'USA'}, {name:'Pooja', country:'India'}, {name:'Mahesh', country:'India'}, {name:'Iqbal', country:'Pakistan'}, {name:'Ramanujam', country:'India'}, {name:'Osama', country:'Iraq'}, {name:'Johnson', country:'UK'}, {name:'Karl', country:'Russia'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>
</body>
</html>
AngularJS自定义过滤器
你可以通过在模块中注册新的过滤器工厂功能来创建自己的过滤器。
请参阅以下示例:
评论前必须登录!
注册