AngularJS过滤器详解及示例代码
更新时间：2016年08月16日 16:42:31 投稿：lqh
本文主要介绍AngularJS过滤器，这里整理了详细的资料和提供了示例代码及实例效果图，有兴趣的小伙伴可以参考下
过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。
| 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 ng-repeat="subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
排序过滤器
要通过标记排序主题，我们使用orderBy标记。
Subject:
<ul>
<li ng-repeat="subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
例子
下面的例子将展示上述所有的过滤器。
testAngularJS.html
<html>
<head>
<title>Angular JS Filters</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<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/>
<table border="0">
<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 ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td></tr>
</table>
</div>
<script>
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>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
输出
在Web浏览器打开textAngularJS.html，看到以下结果：
以上就是AngularJS过滤器的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了angularJS 中$scope方法使用指南,需要的朋友可以参考下2015-02-02
angular源码学习第一篇 setupModuleLoader方法
这篇文章主要介绍了angular源码学习第一篇，setupModuleLoader方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了Angularjs为ng-click事件传递参数的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
Angular中使用Intersection Observer API实现无限滚动效果
这篇文章主要介绍了Angular中使用Intersection Observer API实现无限滚动,实现原理为 在data下面加一个loading元素 如果此元素进入视窗 则调用api获取新的数据加到原来的数据里面,这时loading就会被新数据顶下去,感兴趣的朋友一起看看吧2023-12-12
AngularJS ng-bind-template 指令详解
本文注意介绍AngularJS ng-bind-template 指令,这里把相关资料整理了一下，并附实例代码，有需要的小伙伴可以参考下2016-07-07
这篇文章主要给大家介绍了关于对Angular中单向数据流的深入理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-03-03
AngularJs unit-testing（单元测试）详解
本文主要介绍AngularJs unit-testing（单元测试）的内容，这里整理了单元测试的知识，及示例代码，有兴趣的朋友可以参考下2016-09-09
本文主要介绍AngularJS简单应用程序,这里提供了详细的流程和代码程序，有需要的小伙伴可以参考下2016-08-08
详解angular2实现ng2-router 路由和嵌套路由
本篇文章主要介绍了详解angular2实现ng2-router 路由和嵌套路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
angular2 ng2 @input和@output理解及示例
本篇文章主要介绍了angular2 ng2 @input和@output理解及示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论