AngularJS中的过滤器使用详解


Posted in Javascript onJune 16, 2015

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

AngularJS中的过滤器使用详解

 小写过滤器

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

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中的过滤器使用详解

Javascript 相关文章推荐
javascript中常用编程知识
Apr 08 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
js实现文本框选中的方法
May 26 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
简述AngularJS的控制器的使用
Jun 16 #Javascript
详解AngularJS中的表达式使用
Jun 16 #Javascript
整理AngularJS中的一些常用指令
Jun 16 #Javascript
创建你的第一个AngularJS应用的方法
Jun 16 #Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
使用PHP Socket写的POP3类
2013/10/30 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP 微信支付类 demo
2015/11/30 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python绘图方法实例入门
2015/05/19 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
OpenCV实现人脸识别
2017/04/07 Python
python僵尸进程产生的原因
2017/07/21 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
教师节宣传方案
2014/05/23 职场文书
小学语文业务学习材料
2014/06/02 职场文书
干部个人对照检查材料
2014/08/25 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
nginx 配置缓存
2022/05/11 Servers