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 相关文章推荐
jQuery live
May 15 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
浅析node.js中close事件
Nov 26 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
Javascript通过控制类名更改样式
2019/05/24 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python实现的简单算术游戏实例
2015/05/26 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
一套SQL笔试题
2016/08/14 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
组织关系转移介绍信
2014/01/16 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
物业接待员岗位职责
2015/04/15 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
图神经网络GNN算法
2022/05/11 Python