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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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面向对象全攻略 (七) 继承性
2009/09/30 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
微信小程序实现人脸检测功能
2018/05/25 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Python导入oracle数据的方法
2015/07/10 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python 中Operator模块的使用
2021/01/30 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
中科创达面试题
2016/12/28 面试题
初中科学教学反思
2014/01/21 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
房地产项目合作意向书
2015/05/08 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
2016特色励志班级口号
2015/12/24 职场文书
高二英语教学反思
2016/03/03 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL