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 中的内存泄露模式
Aug 13 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
JS错误处理与调试操作实例分析
Apr 13 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事务处理实例详解
2014/07/11 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
React实现全选功能
2020/08/25 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python版微信红包分配算法
2015/05/04 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
如何理解Python中包的引入
2020/05/29 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
药剂专业个人求职信范文
2014/04/29 职场文书
企业员工集体活动方案
2014/08/17 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
停电调休通知
2015/04/16 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL