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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
Javascript客户端脚本的设计和应用
Aug 21 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
JavaScript实现栈结构详细过程
Dec 06 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程序的方法
2009/03/09 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
javascript模拟命名空间
2015/04/17 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
Angular5集成eventbus的示例代码
2018/07/19 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
编写python代码实现简单抽奖器
2020/10/20 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
《在家里》教后反思
2014/03/01 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
市场推广策划方案
2014/06/02 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
积极心理学课程心得体会
2016/01/22 职场文书