AngularJS 过滤器的简单实例


Posted in Javascript onJuly 27, 2016

AngularJS 过滤器

过滤器可以使用一个管道字符(|)添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换数据:

过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

表达式中添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.

((下面的两个实例,我们将使用前面章节中提到的 person 控制器))

uppercase 过滤器将字符串格式化为大写:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>

 运行结果:

 姓名为   DOE

 lowercase 过滤器将字符串格式化为小写:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>

 运行结果:

姓名为  doe

 currency 过滤器

currency 过滤器将数字格式化为货币格式:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="costCtrl">

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
  $scope.quantity = 1;
  $scope.price = 9.99;
});
</script>

</body>
</html>

 运行结果:

数量:  价格: 

总价 = $9.99

向指令添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>循环对象:</p>
<ul>
 <li ng-repeat="x in names | orderBy:'country'">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

运行结果:

循环对象:

  • Kai, Denmark
  • Jani, Norway
  • Hege, Sweden

过滤输入

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
 <li ng-repeat="x in names | filter:test | orderBy:'country'">
  {{ (x.name | uppercase) + ', ' + x.country }}
 </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

运行效果:

输入过滤:

  • KAI, Denmark
  • JANI, Norway
  • HEGE, Sweden

以上就是对AngularJS 过滤器的知识整理,后续继续补充,有需要的朋友可以参考下。

Javascript 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
AngularJS中的作用域实例分析
May 16 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
AngularJS延迟加载html template
Jul 27 #Javascript
AngularJS入门教程之控制器详解
Jul 27 #Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 #Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 #Javascript
AngularJS入门之动画
Jul 27 #Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 #Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 #Javascript
You might like
PHP开发需要注意的安全问题
2010/09/01 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python实现的RSS阅读器实例
2015/07/25 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python实现EM算法实例代码
2020/10/04 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
年度考核自我鉴定
2014/03/19 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
新闻学专业求职信
2014/07/28 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
小学教师教学反思
2016/02/24 职场文书