过滤器(filter)主要用于数据的格式上,通过某个规则,把值处理后返回结果。例如获得数据集,可排序后再返回。

ng内置的共有九种过滤器:

currency 货币

  使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币:

  {{num | currency : '¥'}}

date 日期

  原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求。用法如下:

  {{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

  参数用来指定所要的格式,y M d h m s E 分别表示 年 月 日 时 分 秒 星期,你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串,例如“shortTime”将会把时间格式为12:05 pm这样的。ng提供了八种描述性的字符串,个人觉得这些有点多余,我完全可以根据自己的意愿组合出想要的格式,不愿意去记这么多单词~

filter 子串匹配

这个名叫filter的filter,用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。下面举个例子说明一下参数的用法

$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];
$scope.func = function(e){return e.age>4;}
{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数,指定返回age>4的

json 格式化json对象

json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串

{{ jsonTest | json}}

作用就和我们熟悉的JSON.stringify()一样

limitTo 限制个数

limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度,如果参数是负值,则从数组尾部开始截取

{{ childrenArray | limitTo : 2 }}  //将会显示数组中的前两项

lowercase 小写

把数据转化为全部小写

uppercase 大写

把数据转化为全部大写

number  数字

number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定float类型保留几位小数:

{{ num | number : 2 }}

orderBy 排序

 orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较)

<div>{{ childrenArray | orderBy : 'age' }}</div>      //按age属性值进行排序,若是-age,则倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序 二、自定义过滤器
filter的自定义方式也很简单,使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。话不多说,我们来写一个看看。比如我需要一个过滤器,它可以返回一个数组中下标为奇数的元素,代码如下:
app.filter('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<inputArray.length;i++){
if(i%2!==0){
array.push(inputArray[i]);
}
}
return array;
}
});

格式就是这样,你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数,参数就定义在return的那个函数中,作为第二个参数,或者更多个参数也可以。


filter的两种使用方法

1、在模板中使用filter

//我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:
{{ expression | filter }}
//也可以多个filter连用,上一个filter的输出将作为下一个filter的输入
{{ expression | filter1 | filter2 | ... }}
//filter可以接收参数,参数用 : 进行分割,如下:
{{ expression | filter:argument1:argument2:... }}
//除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:
<span ng-repeat="a in array | filter ">

2、在controller和service中使用filter

app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
  $scope.date = $filter('date')(new Date());
}

AngularJS的过滤器$filter的更多相关文章

  1. Angularjs 1 使用filter格式化输出href

    Angularjs版本: 1.3.5 工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的, ...

  2. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  3. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  4. angularjs ngTable -Custom filter template-calendar

    jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html& ...

  5. AngularJs(八) 过滤器filter创建

    大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...

  6. AngularJS学习笔记filter

    filter是对数据进行过滤操作,比如按某个字段搜索.格式化数据等等,是一个非常有用的接口.下面就简单介绍下它的用法. AngularJS自带的filter接口,|是filter的分隔符,参数用:分隔 ...

  7. AngularJS之过滤器

    AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...

  8. AngularJS:过滤器

    ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...

  9. angularjs中的filter(过滤器)——格式化日期的date

    date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串. 格式化字符串的基本参数: 'yyyy': 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 20 ...

  10. angularjs自定义过滤器

    实现一个按输入框中的数据筛选的功能,筛选可按电影的名称.年份.评分检索框: <input type="text" placeholder="可检索名字评分和年份&q ...

随机推荐

  1. 妙用 `package.json` 快速 `import` 文件(夹)

    前言 import router from './router'; import router from '../../router'; import router from './../../../ ...

  2. Matlab自带常用的分类器,直接复制用就好了,很方面。

    很方面的,懒得自己写了. clc   clear all     load('wdtFeature');         %   训练样本:train_data             % 矩阵,每行 ...

  3. Struts2中Action配置的三种方式

    <!-- 方案一:一个action对应一个方法; --> <action name="add" class="com.gxxy.struts.kp03_ ...

  4. 1441: Min

    1441: Min Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 320  Solved: 213[Submit][Status][Discuss] De ...

  5. SQL一次查出相关类容避免长时间占用表(上)

    /* server: db: EDI */ -- 以下案例多次查询同一张表,仅有组合条件Name+Direction不同 --可以使用一次查出相关类容避免长时间占用表 USE EDI GO DECLA ...

  6. Swiper3 的特色功能

  7. 基于Spring Cloud和Netflix OSS构建微服务,Part 2

    在上一篇文章中,我们已使用Spring Cloud和Netflix OSS中的核心组件,如Eureka.Ribbon和Zuul,部分实现了操作模型(operations model),允许单独部署的微 ...

  8. js 的DOM操作 2017-03-21

    DOM(document object model) 文档对象模型 BOM(browse object model) 针对浏览器(如:弹出的窗口,滚动条等) 一.操作对象(注意大小写:注意elemen ...

  9. (2)java中的集中关系,is a, has a, 继承,重点聊聊继承

    java中常见的类关系(javacore上面也有介绍道的) 1.is a关系() 2.has a 整体与局部的关系 3.继承关系 是现实世界中存在而上面两种关系又无法描述的 当然谈的最多的是继承关系, ...

  10. JavaScript高级程序设计(学习)

    文档模式是:混杂模式和标准模式. 若在文档开始处没有文档类型声明,则浏览器就会开启混杂模式.这种模式在不同的浏览器下行为差异非常大,如果不使用某些hack技术,跨浏览器的行为根本就没有一致性可言. 局 ...