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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
Js经典案例的实例代码
May 10 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
Node爬取大批量文件的方法示例
2019/06/28 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
销售自荐信
2013/10/22 职场文书
个人安全生产承诺书
2014/05/22 职场文书
教师专业自荐信
2014/05/31 职场文书
施工员岗位职责
2015/02/10 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
Redis Lua脚本实现ip限流示例
2022/07/15 Redis