AngularJS基础知识笔记之过滤器

更新时间：2026-04-09 14:38:21作者：zhao

过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。

S.No. 名称描述

1 大写转换文本为大写文本。

2 小写转换文本为小写文本。

3 货币货币格式格式文本。

4 过滤器过滤数组中它根据所提供的标准的一个子集。

5 排序排序提供标准的基础数组。大写过滤器

添加大写的过滤器使用管道符的表达式。在这里，添加了大写过滤器，全部用大写字母打印学生姓名。

Enter first name:<input type="text" ng-model="student.firstName">

Enter last name: <input type="text" ng-model="student.lastName">

Name in Upper Case: {{student.fullName() | uppercase}}

小写过滤器

添加小写的过滤器，使用管道符的表达式。在这里添加小写过滤器，以小写字母打印学生姓名。

Enter first name:<input type="text" ng-model="student.firstName">

Enter last name: <input type="text" ng-model="student.lastName">

Name in Upper Case: {{student.fullName() | lowercase}}

货币滤波器

加币过滤器使用管道符返回数的表达式。在这里，我们添加了过滤器，货币使用货币格式的打印费用。

Enter fees: <input type="text" ng-model="student.fees">

fees: {{student.fees | currency}}

过滤器的过滤器

要仅显示所需的主题，我们使用subjectName作为过滤器。

Enter subject: <input type="text" ng-model="subjectName">

Subject:

<ul>

</li>

</ul>

排序过滤器

要通过标记排序主题，我们使用orderBy标记。

Subject:

<ul>

</li>

</ul>

例子

下面的例子将展示上述所有的过滤器。

testAngularJS.html

<html>

<head>

<title>Angular JS Filters</title>

</head>

<body>

<h2>AngularJS Sample Application</h2>

<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>

<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>

<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>

<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>

</table>

<br/>

<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>

<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>

<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>

<tr><td>Subject:</td><td>

<ul>

</li>

</ul>

</td></tr>

</table>

</div>

function studentController($scope) {

$scope.student = {

firstName: "Mahesh",

lastName: "Parashar",

fees:500,

subjects:[

{name:'Physics',marks:70},

{name:'Chemistry',marks:80},

{name:'Math',marks:65}

fullName: function() {

var studentObject;

studentObject = $scope.student;

return studentObject.firstName + " " + studentObject.lastName;

}

};

}

</script>

</body>

</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。