1.分类:

  《1》内置过滤器(见4)

  《2》自定义过滤器

2.作用:接收一个输入,通过某个规则进行处理,然后返回处理后的结果

3.应用:

  《1》在模板中使用

用法   说明
{{ expression | filter }}
直接在{{}}中使用filter,跟在表达式后面用 | 分割
{{ expression | filter1 | filter2 | ... }}

也可以多个filter连用

上一个filter的输出将作为下一个filter的输入

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

filter可以接收参数,

参数用 : 进行分割

<span ng-repeat="a in array | filter ">

在指令中使用filter

先对数组array进行过滤处理,然后再循环输出:

  《2》在controller和service中使用filter

代码:

运行结果:

$123,534.00

Mar 15, 2016

4.内置过滤器详述

《1》currency (货币处理)注意:默认是美元符号,要是输入人民币 :{{num | currency : '¥'}}

《2》.date (日期格式化) {{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}y M d h m s E 分别表示 年 月 日 时 分 秒 星期

《3》filter(匹配子串) 它接收一个参数,用来定义子串的匹配规则。

《4.》son(格式化json对象)

《5》limitTo(限制数组长度或字符串长度)

《6》lowercase(小写)

《7》uppercase(大写)

《8》number(格式化数字)可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定小float类型保留几位小数

《9》orderBy(排序)

例子:

执行结果:

{{arr | filter:4}}-------------------------》3个[{"name":"cindy","age":4}]   (解释:匹配属性值含4的)

{{arr | filter:'a'}}------------------------》3个[{"name":"tiantian","age":7},{"name":"tiantian","age":6}]   (解释:匹配属性值含a的)

{{ arr | filter : {name : 'i'} }}  ---------》3个 [{"name":"kimi","age":3},{"name":"tiantian","age":7},{"name":"tiantian","age":6},{"name":"cindy","age":4}]   (解释:参数是对象,匹配name属性中含有i的)

{{arr | filter: func}}----------------------》3个 [{"name":"tiantian","age":7},{"name":"tiantian","age":6}]  (解释:参数是函数,指定返回age>4的)

{{arr | limitTo:2}}------------------------》3个 [{"name":"kimi","age":3},{"name":"tiantian","age":7}]   (解释:限制数组的长度,显示数组前2项)

{{'welcome' | uppercase}}---------------》3个 WELCOME  (解释:大写)

5.自定义过滤器:

解释:使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。

例子:定义日期的过滤器(2016/3/15)

app.filter('mydate',function(){
  return function(time){
    var oDate=new Date();
    oDate.setTime(time);
    return oDate.getFullYear()+'/'+(oDate.getMonth()+1)+'/'+oDate.getDate();
};
});

作者:smile.轉角

QQ:493177502

【angularJS】过滤器的更多相关文章

  1. AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter

    今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在  controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...

  2. AngularJS 过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...

  3. AngularJS过滤器

    1.过滤器可以使用一个管道字符(|)添加到表达式和指令中. 再次强调一点,所有的运行都要加入angularJS的库文件(类似JQuery的引用) 常见的AngularJS 过滤器 (1) lowerc ...

  4. AngularJS学习之旅—AngularJS 过滤器(七)

    1.AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter ...

  5. AngularJS 1.x系列:AngularJS过滤器(4)

    1. AngularJS过滤器(Filter)使用方法 AngularJS中过滤器(Filter)主要功能是格式化数据. AngularJS过滤器使用方法有3种: ◊ 在表达式{{}}中使用 ◊ 在指 ...

  6. AngularJS过滤器filter入门

    在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...

  7. AngularJS控制器和AngularJS过滤器的学习(3)

    前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...

  8. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  9. angularjs过滤器(一)------禁止转载------

    如果用代码实现:将new Date()转换为 M/D/YY 00:00 格式. 启用过滤器有两种方式:①在HTML中用"|"启用过滤器.格式为{{$scope.property | ...

  10. 关于angularjs过滤器的小尝试

    最近的项目中用到了angularjs,相比传统的jquery直接操作Dom, 开发web项目,angularjs在操作表格数据时的数据绑定,操作让我不禁直呼过瘾,好方便啊, 从后台接口传一个json过 ...

随机推荐

  1. div添加cursor:pointer;失效问题。

    如果你不小心给其它盒子设置了z-index属性显示在最上层而又没有将该盒子进行隐藏. <style> .bottom { position: absolute; width:100px; ...

  2. js 返回小数点后几位

    function fmoney(s, n) //s:传入的float数字 ,n:希望返回小数点几位 { n = n > 0 && n <= 20 ? n : 2; s = ...

  3. php通过某个日期段的周几,获取选中周几对应的日期

    最近在做课程表的项目里用到了这个,有个日期段,选择好周几之后,想获取在这个日期段内选中的星期对应的日期,如下图,代码如下 function getDateByWeek($data) { $start_ ...

  4. websocket 与 tornado 的结合

    对于socket是不陌生的,但是对于websocket我却是陌生的,不同于https,在网页中使用websocket可以同样起到ajax的作用,默默发送数据... 在script中: ws = new ...

  5. 编程经验点滴----在 Oracle 数据库中保存空字符串

    写程序这么多年,近几天才发现,向 Oracle 数据库表中,保存空字符串 '' ,结果成了 null. 由于数据库数值 null 的比较.判断,与空字符串 '' 存在差异.一不留神,代码中留下了 bu ...

  6. JAVA项目从运维部署到项目开发(二.ZooKeeper)

    一.zookeeper的相关介绍 点击查看 二.下载.安装与配置 1.ZooKeeper官网下载地址(点击跳转),当前稳定版本为V3.4.12.Liniux下可以在指定目录,使用wget命令下载. h ...

  7. 【PHPStorm使用手册】如何设置字体大小?

    方案一:鼠标滚轮设置 打开窗口 file -> settings -> Editor -> General, 勾上选项“Change font size(Zoom) with Ctr ...

  8. ES搜索引擎集群模式搭建【Kibana可视化】

    一.简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎(与Solr类似),基于RESTful web接口.Elasticsearch是用Ja ...

  9. SQL中常用系统函数

    --1 CONVERT(数据类型,表达式),CAST( 表达式 AS 数据类型) 转变数据类型--将数字转化为字符串SELECT CONVERT(varchar(2),12)+CONVERT(varc ...

  10. SQL Server如何定位自定义标量函数被那个SQL调用次数最多浅析

    前阵子遇到一个很是棘手的问题,监控系统DPA发现某个自定义标量函数被调用的次数非常高,高到一个离谱的程度.然后在Troubleshooting这个问题的时候,确实遇到了一些问题让我很是纠结,下文是解决 ...