AngularJS过滤器详解及示例代码


Posted in Javascript onAugust 16, 2016

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

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

Javascript 相关文章推荐
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
AngularJS控制器详解及示例代码
Aug 16 #Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 #Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 #Javascript
AngularJS指令详解及示例代码
Aug 16 #Javascript
AngularJS教程之简单应用程序示例
Aug 16 #Javascript
AngularJS教程之MVC体系结构详解
Aug 16 #Javascript
You might like
php生成excel列序号代码实例
2013/12/24 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python实现在线音乐播放器
2017/03/03 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Django框架多表查询实例分析
2018/07/04 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python实现名片管理器的示例代码
2019/12/17 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
文明礼仪伴我行演讲稿
2014/05/12 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
单位租房协议书范本
2014/12/04 职场文书
幼儿园开学通知
2015/04/24 职场文书
2016新年致辞
2015/08/01 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang