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过滤器的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

您可能感兴趣的文章:

Angular4 中常用的指令入门总结
这篇文章主要给大家总结了一些关于Angular4 中入门常用的指令，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。
2017-06-06
如何使用AngularJs打造权限管理系统【简易型】
这篇文章主要介绍了使用AngularJs打造权限管理系统【简易型】的相关资料,需要的朋友可以参考下
2016-05-05
Angular基于Constructor Parameter的依赖注入方式详解
这篇文章主要为大家介绍了Angular基于Constructor Parameter的依赖注入方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
浅谈ng-zorro使用心得
这篇文章主要介绍了浅谈ng-zorro使用心得，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
angular2 ng2 @input和@output理解及示例
本篇文章主要介绍了angular2 ng2 @input和@output理解及示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
在 Angular 中使用懒加载路由的方法
延迟加载是一种限制加载用户当前需要的模块的方法,这可以提高应用程序的性能并减小初始捆绑包大小,在本文中,您学习了如何在 Angular 应用程序中使用惰性加载路由,本文分步骤讲解的非常详细,感兴趣的朋友一起看看吧
2024-02-02
详解AngularJS 模态对话框
在涉及GUI程序开发的过程中，常常有模态对话框以及非模态对话框的概念。接下来通过本文给大家介绍AngularJS 模态对话框，感兴趣的朋友一起学习吧
2016-04-04
详解angularJS自定义指令间的相互交互
本篇文章主要介绍了详解angularJS自定义指令间的相互交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
angular组件间通讯的实现方法示例
这篇文章主要给大家介绍了关于angular组件间通讯的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angular组件具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2020-05-05
Angular 数据请求的实现方法
本篇文章主要介绍了Angular 数据请求的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05