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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
Javascript事件实例详解
Nov 06 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
javascript常用的方法分享
Jul 01 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
关于Js中new操作符的作用详解
Feb 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 include任意文件或URL介绍
2014/04/29 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JavaScript 的继承
2011/10/01 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
Python 文件和输入输出小结
2013/10/09 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
高二历史教学反思
2014/01/25 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
协会周年庆活动方案
2014/08/26 职场文书
西安兵马俑导游词
2015/02/02 职场文书
董事长助理岗位职责
2015/02/11 职场文书
餐馆开业致辞
2015/08/01 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
导游词之镜泊湖
2019/12/09 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
MySQL 数据 data 基本操作
2022/05/04 MySQL