浅析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 相关文章推荐
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
关于Vue中axios的封装实例详解
Oct 20 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操作mysql数据库的基本类代码
2014/02/25 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
js表格分页实现代码
2009/09/18 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
angular 服务随记小结
2019/05/06 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
基于Python List的赋值方法
2018/06/23 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Python 如何在字符串中插入变量
2020/08/01 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
一名女生的自荐信
2013/12/08 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android