AngularJS中的过滤器使用详解


Posted in Javascript onJune 16, 2015

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

AngularJS中的过滤器使用详解

 小写过滤器

添加小写的过滤器,使用管道符的表达式。在这里添加小写过滤器,以小写字母打印学生姓名。

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中的过滤器使用详解

Javascript 相关文章推荐
让复选框只能选择一项的方法
Oct 08 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
简述AngularJS的控制器的使用
Jun 16 #Javascript
详解AngularJS中的表达式使用
Jun 16 #Javascript
整理AngularJS中的一些常用指令
Jun 16 #Javascript
创建你的第一个AngularJS应用的方法
Jun 16 #Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
You might like
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
Javascript 继承实现例子
2009/08/12 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Python获取邮件地址的方法
2015/07/10 Python
Python中Class类用法实例分析
2015/11/12 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
pytorch forward两个参数实例
2020/01/17 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
哈弗商学院毕业生求职信
2014/02/26 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
神农溪导游词
2015/02/11 职场文书
入党转正介绍人意见
2015/06/03 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
Python OpenCV超详细讲解基本功能
2022/04/02 Python