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. canvas 画时钟 会动呦

    //半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...

  2. elasticsearch概念

    1.elasticsearch的核心概念 (1)Near Realtime(NRT):近实时,从写入数据到数据可以被搜索到有一个小延迟(大概1秒):基于es执行搜索和分析可以达到秒级 (2)Clust ...

  3. #WEB安全基础:HTML/CSS | 0x0 我的第一个网页

    #WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...

  4. angular ztree 梯形结构json配置、点击节点事件、默认展开所有

    // 获取树数据 $scope.initZtreeData = function () { var url = '/bpopstation/func/queryAll.do'; $http.post( ...

  5. css:Media Queries: How to target desktop, tablet and mobile?

    <!doctype html> <html> <head> <meta name="viewport" content="wid ...

  6. 微信小程序-查询快递

    1.新建快速启动项目 2.在设置里面勾选不校验合法域名,以防编译报错 3.在app.json中改一下窗口表现:app.json—"navigationBarTitleText": ...

  7. 一种快速构造和获取URL查询参数的方法:URLSearchParams

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串. URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象. 常用方法: 1.构造查询字 ...

  8. Salesforce 导入导出数据简介

    导入数据的方式 有两种方式可以将数据导入Salesforce: 数据导入向导 Data Loader工具 Salesforce支持将csv文件中的数据导入系统. 数据导入向导 数据导入向导可以从设置界 ...

  9. Javascript 流程控制

    流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成.在正常情况下,程序中 的语句时按照书写顺序执行的,这种结构称为顺序结构.除了顺序结构之外还有选择结构和循环结构. 1.选择 ...

  10. (网页)angularJs中怎么模拟jQuery中的this?(转)

    转载自mini_fan博客园: 今天想在Angular项目中使用jQuery的this功能,发现undefined.代码如下: HTML部分: <p ng-click="testCli ...