angular js Filter
来源:互联网 发布:阿里丁丁 mac 编辑:程序博客网 时间:2024/06/06 18:11
说说AngularJS中的filter
如果你熟悉AngularJS的话,一定记得其中有一个叫做filter,过滤器的东西。说的简单通俗一点,顾名思义,过滤器就是用来过滤变量值的东西,当然,这里的过滤可以是删除也可以是添加,具体我们会在后面一一讲解。
AngularJS本身为我们提供了不少内建的过滤器,比如说:currency – 用来将变量转换成货币表现形式,例如:
<div>{{ amount | currency}}</div>
如果此时$scope.amount = 1234.56,那么经过currency过滤的amount就会变为$1,234.56。值得一提的是,过滤器是可以添加参数的,具体添加参数的方式是:
:arg1:arg2
也就是说,每添加一个参数,就在相应过滤器后面加上一个冒号,然后在冒号后面加上参数。拿上面的currency举例,我们可以为它添加标示符参数,例如:
<div>{{ amount | currency:"USD$"}}</div>
假设$scope.amount此时还是1234.56,那么经过currency过滤器的amount变为USD$1,234.56。
AngularJS中为我们提供了一共9个内建的过滤器,分别是currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase。具体的用法在AngularJS的文档中都有详细说明。但是在具体使用中,我们常常会发现这些过滤器可能不能满足我们比较复杂的要求,这个时候就需要我们来编写自定义过滤器。
编写AngularJS自定义过滤器其实非常简单。如果你写过AngularJS的factory service,一定记得它返回一个对象或者是一个函数,编写自定义过滤器的形式和它非常相像,你在编写的时候,只需要一个带有一个以上参数的函数即可。它的大致形式是这样的:
app.filter('过滤器名称',function(){ return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ //...做一些事情 return 处理后的对象; }});
实在是太简单了对吧。如果还是有点迷惑,我们下面来举几个例子。
例子1 编写过滤器在字符串后面加上感叹号
app.filter('filter1',function(){ return function(item){ return item + '!'; }});
实在太简单了,一学就会!item是我们需要处理的那个字符串,所以我们将item的后面加上了一个感叹号然后返回。因此 {{ ‘aaa’ | filter1 }}就会变成’aaa!’。
例子2 编写过滤器,根据参数在字符串后面加上相应个数的感叹号
app.filter('filter2',function(){ return function(item,num){ for(var i = 0;i < num;i++){ item = item + '!'; } return item; }});
太简单了,地球人都知道!
例子3 用过滤器处理一个数组,在数组的每一项后面都加上感叹号
在使用ng-repeat等指令的时候,我们经常需要使用过滤器来对其中的一些项目进行过滤,这里值得注意的一点是,在针对数组进行过滤的时候,返回函数的第一个参数是全部数组,同时最后函数也要返回全部数组。比如:
app.filter('filter3',function(){ return function(items){ angular.forEach(items,function(item){ item = item + '!' }); return items; }});
如果我们在HTML中这样使用:
<ul> <li ng-repeat='item in items | filter3'> {{item}} </li></ul>
而$scope.items = [’a’,’b’,’c’],那么最终的结果是:
<ul> <li>a!</li> <li>b!</li> <li>c!</li></ul>
非常简单对吧!
除了上面提到的意外,我们还可以通过将$filter注入控制器中,以便我们可以在控制器中使用AngularJS内建的或者我们自定义的过滤器,具体的使用方法为:
app.controller('myCtrl',function($scope,$filter){ ... $filter('过滤器名称')(需要过滤的对象,参数1,参数2,...); ...});
比如我们就可以这样使用:
$filter('currency')($scope.amount,'$USD');
过滤器看起来简单,但是在显示的AngularJS应用开发中确实不可或缺的一个东西。为了让我们更加顺手的开发AngularJS应用,少年们认真学好过滤器吧!
- Angular JS filter
- angular js Filter
- Angular js 学习之filter 过滤器
- angular.js学习(2)--filter
- angular js 利用filter进行排序
- angular自定义filter
- Angular 学习之 filter
- angular - filter(自定义)
- Angular过滤器(filter)
- Angular JS
- Angular js
- Angular Js
- angular js
- Angular JS
- angular js
- Angular JS
- Angular JS
- angular.js
- 图文比较八种排序算法
- 生成pdf的三种方法差异
- POJ 2115 Looooops (扩展欧几里得+调整解)
- iOS开发 UITest的使用
- Android 满屏隐藏虚拟键盘
- angular js Filter
- 二层三层转发学习
- JS判断客户端是否是iOS或者Android手机移动端
- ZCMU-1404-Computers
- Hadoop 入门
- 将博客搬至CSDN
- 回家过年要花多少钱?算完感觉生无可恋~
- 虚假的网络钓鱼攻击利用伪造的附件窃取Gmail凭据
- Ubuntu 启动activemq 报/data/activemq.pid: Permission denied 信息