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检测鼠标左键和右键点击的方法
Mar 17 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
vue v-model动态生成详解
Jun 30 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP 实现链式操作
2021/03/09 PHP
javascript 数组的方法集合
2008/06/05 Javascript
document.compatMode介绍
2009/05/21 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
node.js中的require使用详解
2014/12/15 Javascript
ES6的新特性概览
2016/03/10 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python使用folium excel绘制point
2019/01/03 Python
Python:slice与indices的用法
2019/11/25 Python
python画图常规设置方式
2020/03/05 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
自我鉴定怎么写
2013/12/05 职场文书
竞选班长演讲稿
2013/12/30 职场文书
给孩子的新年寄语
2014/04/08 职场文书
关于读书的活动方案
2014/08/14 职场文书
手写实现JS中的new
2021/11/07 Javascript
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python