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调试说明
Jun 07 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php制作动态随机验证码
2015/02/12 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
vue移动端的左右滑动事件详解
2020/06/17 Javascript
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
django反向解析和正向解析的方式
2018/06/05 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
python suds访问webservice服务实现
2020/06/26 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
销售团队获奖感言
2014/08/14 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python