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 相关文章推荐
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
简述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
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
php源码的安装方法和实例
2019/09/26 PHP
强制设为首页代码
2006/06/19 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
keras 权重保存和权重载入方式
2020/05/21 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
PHP面试题大全
2015/10/16 面试题
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
面料业务员岗位职责
2013/12/26 职场文书
铲车司机岗位职责
2014/03/15 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
小学生毕业评语
2014/12/26 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python