通过过滤器可以实现很多数据格式化的功能

常用方法形如{{ data | uppercase}} 或者是{{ 123.456 | number:2 }}

也可以通过在控制器中注入$filter来实现功能

angular.module('MyApp',[])
.controller('FilterController',function($scope,$filter){
$scope.data = $filter('uppercase')('ard');
});

1.currency 货币单位

{{ 123456.789 | currency }}        $123,456.79 
{{ 123456.789 | currency:'¥' }}       ¥123,456.79 
{{ 123456.789 | currency:'¥':2 }}    ¥123,456.79
{{ 123456.789 | currency:'¥':0 }}    ¥123,457
 

2.date 日期格式化

2.1.日期的格式化

{{ today | date}}              May 3, 2018 
{{ today | date:'medium' }}        May 3, 2018 10:05:21 PM 
{{ today | date:'short' }}        5/3/18 10:05 PM 
{{ today | date:'fullDate' }}         Thursday, May 3, 2018
{{ today | date:'longDate' }}       May 3, 2018
{{ today | date:'mediumDate'}}       May 3, 2018
{{ today | date:'shortDate'}}       5/3/18
{{ today | date:'mediumTime'}}       10:05:21 PM 
{{ today | date:'shortTime'}}       10:05 PM 
 

2.2.年份的格式化

{{ today | date:'yyyy'}}       2018       
{{ today | date:'y'}}          2018
{{ today | date:'yy'}}           18

2.3.月份格式化

{{ today | date:'MMMM'}}       August       
{{ today | date:'MMM'}}          Aug
{{ today | date:'MM'}}        08
{{ today | date:'M'}}              8

2.4.日期格式化

{{ today | date:'EEEE'}}        Thursday      
{{ today | date:'EEE'}}          Thu
{{ today | date:'dd'}}        08
{{ today | date:'d'}}             8

2.5.小时格式化

{{ today | date:'HH' }}           24小时制数字小时:
{{ today | date:'H' }}         一天中的第几个小时:
{{ today | date:'hh' }}         12小时制数字小时:
{{ today | date:'h' }}         上午或下午的第几个小时:

2.6.分钟格式化

{{ today | date:'mm' }}           09
{{ today | date:'m' }}         9

2.7.秒数格式化

{{ today | date:'ss' }}         02
{{ today | date:'s' }}           2
{{ today | date:'.sss' }}         .995

2.8.字符格式化

{{ today | date:'a' }}           AM
{{ today | date:'Z' }}           0800   时区标识

2.8.自定义的组合格式化

{{ today | date:'MMMd, y' }}      Aug9, 2013
{{ today | date:'EEEE, d, M' }}     Thursday, 9, 8
{{ today | date:'hh:mm:ss.sss' }}    12:09:02.995

3.从数组中筛选符合条件的结果

3.1.数组中对象为简单对象(纯数字或字符串)

3.1.1.过滤条件为简单字符串 {{ data | filter:'abc' }}

只要存在filter中过滤条件的字符串都能被返回

$scope.data = ['abc','abcde','hahaha']   

输出的结果为 ['abc','abcde']   

如果想要排除某种字符串 则使用 {{ data | filter:'!abc'}}

3.2.数组中对象为复杂对象

3.2.1.过滤条件为简单字符串 {{ data | filter:'abc' }}

只有某个对象的的键值对中的值符合条件才会被输出。

$scope.data= [{"name":"alex","age":16},{"name":"keji","age":16},{"age":22,"gender":"man"}];

3.2.2.过滤条件为对象 {{ data | filter:{'name':'alex'} }}

只有对象中包含该键,且键的值等于过滤条件的才会被输出。

$scope.data = [{'name':'alex','age':'18'},{'name':'peter','age':'19'},{'name':'keke','gender':'woman'}];       输出结果为[{"name":"alex","age":"18"}]

如果不需要指定data中是哪个键的属性中包含指定的属性,那么可以用

{{ data | filter:{'$':'alex'} }} 这种写法,此时就是类似将对象转为字符串,如果值中包含指定的字符串,则输出该对象,类似与上面直接用一个字符串作为条件来过滤。

3.3.自定义函数实现过滤逻辑校验

3.3.1.{{ data | filter:isCapitalized }}

通过自定义函数isCapitalized 中需要过滤的数据进行逐个筛选,如果满足条件,函数返回true

var app = angular.module('myApp',[]);
app.controller('MyCtrl',function($scope){
$scope.data = [{'name':'alex','age':'18'},{'name':'peter','age':'19'},{'name':'keke','gender':'woman'}];
$scope.dataTwo = ['Alex','peter','json'];
$scope.isCapitalized = function(obj){
return obj.name == 'alex';
}
});

3.3.2.自定义filter(可以看作上面自定义函数的另一种写法)

var app = angular.module('myApp',[]);
app.filter('myReverse',function(){
return function(text){
return text.split("").reverse().join("");
}
})

3.4.使用filter时候的第二个参数

3.4.1.TRUE  {{ data | filter:'xxx':true}}

此时的过滤条件为全等,只有data中的数据与过滤条件完全一致(大小写,类型等),才能被输出。

3.4.2.FALSE  {{ data | filter:'xxx':false}}

此时的过滤条件为非全等,只有data中的数据与过滤条件字面值一致(忽略大小写,类型等),就能被输出。

3.4.3.JSON  {{ data | filter:'xxx':json}}

此时会将结果以json的格式输出

3.5.limitTo {{ data | limitTo:n }}

n为正值,从前往后截取。n为负值,从后往前截取。

若data为简单对象,返回的也是同种类型对象。

若data为对象数组,返回的也是数组。

若n大于data的长度,返回整个对象。

3.6.uppercase {{ data | uppercase }}

将字符串转为大写

3.7.lowercase {{ data | lowercase }}

将字符串转为小写

3.8.number {{ data | number:x}}

将数字添加千分符,默认x=3,即保留小数点后三位,进行四舍五入。

{{ 1234567.78935 | number:4 }}   输出  1,234,567.7894

3.9. orderBy {{ data | orderBy:fun:true}} (fun为必填,第二个参数默认false)

3.9.1.fun为函数

此时需要自定义一个函数来实现入参的处理

若定义函数为

$scope.sortSimpleType(op){

     return op;
}
 
入参为简单的字符串数组 
{{ data | orderBy:sortSimpleType }}
 
$scope.data = " ['test','bob','market','type','barrow'] "
 
输出为 
 
["barrow","bob","market","test","type"]
 
若$scope.data = "[1,3434,2,1,12121,6,56,3] "
 
输出为
 
[1,1,2,3,6,56,3434,12121]
 
若入参为对象组成的数组,则只需要在自定义函数中返回元素的属性
$scope.sortObjectType = function(obj){
   return obj['name']
}
 
{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: sortObjectType}}
 
结果为
 
[{"name":"bob","age":"23"},{"name":"nick","age":"34"}]

3.9.2.fun为字符

如果是字符串,假如待排序的数组为对象,那么将会按照待排序数组中的每个对象的对应属性值,进行排序。如果字符串前边加有“+”,“-”符号,那么+表示升序排序,-表示降序排序。如果字符串为空,那么将按照元素自身进行排序。

对于元素是对象的数组按照某一个属性来排序,此时只需要指定字符为属性名就行,相比于上面需要自定义一个函数更便捷。

{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: 'name'}}

输出结果

[{"name":"bob","age":"23"},{"name":"nick","age":"34"}].

3.9.3.fun为数组

如果是array,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序,如果a属性值相同,那么将按照b属性值进行排序。

{{[{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}]] | orderBy:[ 'name','age']}}

输出结果

[{"name":"bob","age":23},{"name":"nick","age":23},{"name":"nick","age":34}]

Angular JS 中的内置方法之filter的更多相关文章

  1. Angular JS 中的内置方法之$watch

    在$apply方法中存在脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. $watch(watchFn,watc ...

  2. Angular JS 中的内置方法之表单验证

    angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用

  3. js中数组内置方法

    var arr = ['A','B','C','D']; length 计算数组的长度 arr.length//4 indexOf() 搜索一个指定的元素的位置 arr.indexOf('C');// ...

  4. js中的内置方法的兼容写法

    1.如果浏览器不支持every属性,every的实现原理 if(Array.prototype.every===undefined){ Array.prototype.every=function(f ...

  5. JS中的内置对象简介与简单的属性方法

    JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一 ...

  6. Angular JS 中的服务注册方法

    在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...

  7. Python中class内置方法__init__与__new__作用与区别探究

    背景 最近尝试了解Django中ORM实现的原理,发现其用到了metaclass(元类)这一技术,进一步又涉及到Python class中有两个特殊内置方法__init__与__new__,决定先尝试 ...

  8. python中字符串内置方法

    字符串类型 作用:定义姓名.性别等 定义方式: s='lzs' #\n换行 \t缩进4个空格 \r回退上一个打印结果,覆盖上一个打印结果 加上一个\让后面的\变得无意义 内置方法: (优先掌握) 1. ...

  9. js中的内置对象(还没怎么看)

         在js里,一切皆为或者皆可以被用作对象.可通过new一个对象或者直接以字面量形式创建变量(如var i="aaa"),所有变量都有对象的性质.注意:通过字面量创建的对象在 ...

随机推荐

  1. Laravel --- 要点笔记

    一.路由: // 常规用法 Route::get('/',function(){ return 'get'; }) // 匹配多个 Route::match(['get','post'],'/',fu ...

  2. __file__、__name__、__dict__方法整理

    本文主要介绍__file__.__name__.__dict__三个方法的作用. #01 __file__:打印当前文件的位置. # import os # print(__file__) # 在py ...

  3. 一文详解 LVS、Nginx 及 HAProxy 工作原理( 附大图 )

    当前大多数的互联网系统都使用了服务器集群技术,集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务,这些集群可以是 Web 应用服务器集群,也可以是数据库服务器集群,还可以是分布式缓存服务器 ...

  4. C# Winfrom 简单的运用Timer控件

    注意,在使用DateAndTime时,需要添加引用 using Microsoft.VisualBasic;否则不可以计算时间之间的差值. using System; using System.Col ...

  5. 干货!Git 如何使用多个托管平台管理代码

    考虑到github不能免费创建私有仓库原因,最近开始在使用码云托管项目,这样避免了连接数据库的用户密码等信息直接暴露在公共仓库中.今天突然想到一个点,就是能不能同时把代码推送到github和码云上呢? ...

  6. Hive学习之路(二)—— Linux环境下Hive的安装部署

    一.安装Hive 1.1 下载并解压 下载所需版本的Hive,这里我下载版本为cdh5.15.2.下载地址:http://archive.cloudera.com/cdh5/cdh/5/ # 下载后进 ...

  7. c/c++基础内容回顾

    1.1基本数据类型 1.1.1 变量的定义 变量类型 变量名 变量类型 变量名=初值: 注意:不能以C语言标识符作为变量名,变量名的第一个字符必须是字母或者下划线,其它位置字符必须是字母.数字.下划线 ...

  8. 【dateFormatSymbols】JAVA特殊日期格式转换

    记录:特殊日期格式转换,如将yyyyMMdd转为01MAY2019 public static final String DATE_VIP_FORMAT = "yyyyMMdd"; ...

  9. 【设计模式】【最后一个】结构型07适配器模式(Adapter Pattern)

    适配器模式(Adapter Pattern) 推荐一个很全面的博客:https://blog.csdn.net/zxt0601/article/details/52848004 定义:将一个类的接口转 ...

  10. MediatR一个.net中简单好用的中介者模式实现方案

    MediatRGit地址:https://github.com/jbogard/MediatR 1.安装妞盖特包 一般来说只需要安装一个MediatR就行了,.net core程序需要再安装一个Med ...