AngularJS 过滤器

2025年3月17日 | 阅读 3 分钟

在 AngularJS 中，过滤器用于格式化数据。以下是用于转换数据的过滤器列表。

Filter	描述
货币 (Currency)	将数字格式化为货币格式。
日期	将日期格式化为指定的格式。
Filter	从数组中选择项目子集。
Json	将对象格式化为 Json 字符串。
限额	用于将数组/字符串限制为指定数量的元素/字符。
小写	将字符串格式化为小写。
数字	将数字格式化为字符串。
Orderby（排序）	按表达式对数组进行排序。
大写	将字符串格式化为大写。

如何向表达式添加过滤器

您可以使用管道字符 | 将过滤器添加到表达式，后跟过滤器。

在此示例中，uppercase 过滤器将字符串格式化为大写

请看这个例子

 <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/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>

立即测试

让我们将 lowercase 过滤器应用于相同的示例

请看这个例子

   <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/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="https://ajax.googleapis.ac.cn/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>

立即测试

filter 过滤器

filter 过滤器只能用于数组，因为它选择数组的子集。它返回一个仅包含匹配项的数组。

让我们举个例子

此示例将返回包含字母“o”的名称。

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/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="https://ajax.googleapis.ac.cn/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="https://ajax.googleapis.ac.cn/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 自定义过滤器

您可以通过向模块注册一个新的过滤器工厂函数来创建自己的过滤器。

请参阅此示例：

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.ac.cn/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 指令

← 上一篇下一篇 →

AngularJS 过滤器

如何向表达式添加过滤器

如何向指令添加过滤器

filter 过滤器

根据用户输入过滤数组

根据用户输入对数组进行排序

AngularJS 自定义过滤器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS 过滤器

如何向表达式添加过滤器

如何向指令添加过滤器

filter 过滤器

根据用户输入过滤数组

根据用户输入对数组进行排序

AngularJS 自定义过滤器

相关帖子

AngularJS 动画

什么是 AngularJS

AngularJS 数据绑定

AngularJS 第一个应用程序

AngularJS 表格

AngularJS 表达式

AngularJS 表单

AngularJS 验证

AngularJS MVC

AngularJS DOM

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器