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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
浅谈下拉菜单中的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下将XML转换为数组
2010/01/01 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
javascript验证身份证号
2015/03/03 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
js实现中文实时时钟
2020/01/15 Javascript
python 提取文件的小程序
2009/07/29 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python3爬虫学习入门教程
2018/12/11 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
《哪吒闹海》教学反思
2014/02/28 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
用php如何解决大文件分片上传问题
2021/07/07 PHP
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫