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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
浅谈下拉菜单中的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
linux iconv方法的使用
2011/10/01 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
js实现表格数据搜索
2020/08/09 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Python 获取项目根路径的代码
2019/09/27 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
竞争上岗演讲稿
2014/01/05 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
阿凡达观后感
2015/06/10 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL