AngularJS基础知识笔记之过滤器


Posted in Javascript onMay 10, 2015

过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。

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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
浅谈下拉菜单中的Option对象
May 10 #Javascript
AngularJS基础学习笔记之控制器
May 10 #Javascript
AngularJS基础学习笔记之指令
May 10 #Javascript
AngularJS基础学习笔记之表达式
May 10 #Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
You might like
小偷PHP+Html+缓存
2006/12/20 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
简单学习vue指令directive
2016/11/03 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python中的迭代器漫谈
2015/02/03 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python聊天室程序(基础版)
2018/04/01 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
单位人事专员介绍信
2014/01/11 职场文书
云台山导游词
2015/02/03 职场文书
法律意见书范文
2015/06/04 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python