浅析AngularJS Filter用法


Posted in Javascript onDecember 28, 2015

系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧

Filter简介

Filter是用来格式化数据用的。

Filter的基本原型( ‘|' 类似于Linux中的管道模式):

{{ expression | filter }}

Filter可以被链式使用(即连续使用多个filter):

{{ expression | filter1 | filter2 | ... }}

Filter也可以指定多个参数:

{{ expression | filter:argument1:argument2:... }}

AngularJS内建的Filter

AngularJS内建了一些常用的Filter,我们一一来看一下。

currencyFilter(currency):

用途:格式化货币

方法原型:

function(amount, currencySymbol, fractionSize)

用法:

 {{  | currency}}  <!--将格式化为货币,默认单位符号为 '$', 小数默认位-->
 {{ . | currency:'¥'}} <!--将.格式化为货币,使用自定义单位符号为 '¥', 小数默认位-->
 {{ . | currency:'CHY¥':}} <!--将.格式化为货币,使用自定义单位符号为 'CHY¥', 小数指定位, 会执行四舍五入操作 -->
 {{ . | currency:undefined:0}} <!--将12.55格式化为货币, 不改变单位符号, 小数部分将四舍五入 -->

dateFilter(date):

用途:格式化日期

方法原型:

function(date, format, timezone)

用法:

<!--使用ISO标准日期格式 -->
{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}
<!--使用13位(单位:毫秒)时间戳 -->
{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}
<!--指定timezone为UTC -->
{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}

filterFilter(filter):

用途:过滤数组

方法原型:

function(array, expression, comparator)

用法1(参数expression使用String):

<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <!-- 参数expression使用String,将全文搜索关键字 'a' -->
   <div ng-repeat="u in myArr | filter:'a' ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

用法2(参数expression使用function):

// 先在Controller中定义function: myFilter
 $scope.myFilter = function (item) {
   return item.age === ;
 };
 <div ng-repeat="u in myArr | filter:myFilter ">
   <p>Name:{{u.name}}</p>
   <p>Age:{{u.age}}</p>
   <br />
 </div>

用法3(参数expression使用object):

<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <div ng-repeat="u in myArr | filter:{age: } ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

用法4(指定comparator为true或false):

<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   Name:<input ng-model="yourName" />
   <!-- 指定comparator为false或者undefined,即为默认值可不传,将以大小写不敏感的方式匹配任意内容 -->
   <!-- 可以试试把下面代码的comparator为true,true即大小写及内容均需完全匹配 -->
   <div ng-repeat="u in myArr | filter:{name:yourName}:false ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

用法5(指定comparator为function):

// 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容,但与comparator为false的情况不同的是,comparator必须匹配全文
 $scope.myComparator = function (expected, actual) {
   return angular.equals(expected.toLowerCase(), actual.toLowerCase());
 }
 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   Name:<input ng-model="yourName" />
   <div ng-repeat="u in myArr | filter:{name:yourName}:myComparator ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

jsonFilter(json):

方法原型:

function(object, spacing)

用法(将对象格式化成标准的JSON格式):

{{ {name:'Jack', age: 21} | json}}

limitToFilter(limitTo):

方法原型:

function(input, limit)

用法(选取前N个记录):

<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <div ng-repeat="u in myArr | limitTo:">
     <p>Name:{{u.name}}
     <p>Age:{{u.age}}
   </div>
 </div>

lowercaseFilter(lowercase)/uppercaseFilter(uppercase):

方法原型:

function(string)

用法:

China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.

numberFilter(number):

方法原型:

function(number, fractionSize)

用法:

{{ "3456789" | number}}
<br />
{{ true | number}}
<br />
{{ 12345678 | number:1}}

orderByFilter(orderBy):

方法原型:

function(array, sortPredicate, reverseOrder)

用法:

<div ng-init="myArr = [{name:'Tom', age:, deposit: }, {name:'Tom', age:, deposit: }, {name:'Tom Senior', age:, deposit: }, {name:'May', age:, deposit: }, {name:'Jack', age:, deposit:}, {name:'Alice', age:, deposit: }]">
   <!--deposit前面的'-'表示deposit这列倒叙排序,默认为顺序排序
   参数reverseOrder:true表示结果集倒叙显示-->
   <div ng-repeat="u in myArr | orderBy:['name','-deposit']:true">
     <p>Name:{{u.name}}</p>
     <p>Deposit:{{u.deposit}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

自定义Filter

和Directive一样,如果内建的Filter不能满足你的需求,你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter:capitalize_as_you_want,该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。

方法原型:

function (input, capitalize_index, specified_char)

完整的示例代码:

<!DOCTYPE>
 <html>
 <head>
   <script src="/Scripts/angular.js"></script>
   <script type="text/javascript">
     (function () {
       var app = angular.module('ngCustomFilterTest', []);
       app.filter('capitalize_as_you_want', function () {
         return function (input, capitalize_index, specified_char) {
           input = input || '';
           var output = '';
           var customCapIndex = capitalize_index || -;
           var specifiedChar = specified_char || '';
           for (var i = ; i < input.length; i++) {
             // 首字母肯定是大写的, 指定的index的字母也大写
             if (i === || i === customCapIndex) {
               output += input[i].toUpperCase();
             }
             else {
               // 指定的字母也大写
               if (specified_char != '' && input[i] === specified_char) {
                 output += input[i].toUpperCase();
               }
               else {
                 output += input[i];
               }
             }
           }
           return output;
         };
       });
     })();
   </script>
 </head>
 <body ng-app="ngCustomFilterTest">
   <input ng-model="yourinput" type="text">
   <br />
   Result: {{ yourinput | capitalize_as_you_want::'b' }}
 </body>
 </html>

好了,本篇讲了AngularJS中的Filter,看完这篇后,我们可以利用好Filter非常方便的使数据能按我们的要求进行展示,从而使页面变得更生动。

Javascript 相关文章推荐
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
详解vuex状态管理模式
Nov 01 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
jquery实现倒计时功能
Dec 28 #Javascript
基于jquery实现瀑布流布局
Jun 28 #Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 #Javascript
原生JavaScript实现瀑布流布局
Jun 28 #Javascript
js实现瀑布流的三种方式比较
Jun 28 #Javascript
详解AngularJS中自定义过滤器
Dec 28 #Javascript
js运动应用实例解析
Dec 28 #Javascript
You might like
PHP生成便于打印的网页
2006/10/09 PHP
php 正则表达式小结
2009/08/31 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
python框架django基础指南
2016/09/08 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python机器学习实战之K均值聚类
2017/12/20 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
优秀共产党员先进事迹材料
2014/05/06 职场文书
社区科普工作方案
2014/06/03 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL