博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【angularJS】Filter 过滤器
阅读量:6943 次
发布时间:2019-06-27

本文共 2422 字,大约阅读时间需要 8 分钟。

  当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在AngularJS中有常见默认的过滤器,当然若不满足所需,我们可以自定义过滤器。

AngularJS 过滤器可以用来格式化数据,过滤器能够用在表达式和指令中。

使用一个管道字符(|)添加到表达式和指令中。

默认过滤器

列举AngularJS中常见的过滤器,如下:

过滤器名称

描述

例子

 currency

 money格式化

 {

{ p.price | currency}}

 date

 日期格式化

[orderDate为時間類型才行,不能是时间字符串]

 

{ p.orderDate | date : “dd MMM yyyy” }}

可以是| date : 'yyyy年MM月dd日'

{

{ p.orderDate | date : “shortDate” }}

 json

 将JSON字符串生成一个JSON对象

 

<tr ng-repeat="p in products">

<td colspan="4">{

{p | json}}</td>

</tr>

 number

 格式化数值并给出精确度位数

 

{

{ p.price | number : 0}} 

{

{ p.price | number : 2}} 

 

uppercase

lowercase

 大小写转换

 

{

{ p.city | lowercase }}

{

{ p.state | uppercase }}

 limitTo

 控制列表渲染数据。限制数组长度或字符串长度

 <tr ng-repeat="p in products | limitTo:10">

 orderBy

 排序

 

<tr ng-repeat="p in products | orderBy : ‘name’”>

For descending order

<tr ng-repeat="p in products | orderBy : ‘-name’”>

 

 

 

 

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的

 

自定义过滤器

AngularJS不仅仅支持内部自构建的过滤器,而且还可以自定义过滤器来满足我们所需,若自定义过滤器此时我们需要 通过module.filter来实现,实际上内部是通过FilterProvider来实现。module.filter这个方法有两个参数,一个是需要创建的过滤器的名称,另外一个是创建一个factory函数来使得该自定义过滤器生效或者工作。

接下来我们实现一个自定义过滤器,该过滤器带一个参数(reverse),实现了再对照代码就明朗了。如下:

app.filter("properCase", function () {      return function (value, reverse) {  //value是需要使用过滤器的对象        if (angular.isString(value)) {              var intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();     return (reverse == false ? intermediate[0].toLowerCase() :intermediate[0].toUpperCase()) + intermediate.substr(1);          } else {              return value;          }      };  });
View Code

接下来在视图中将绑定的名称和类别修改成如下:

value | filter:reverse

 <td>{

{p.name | properCase}}</td>  //首字母大写

 <td>{

{p.category | properCase : false}}</td>  //首字母小写

混合过滤器

当进行渲染数据时,有可能需要进行多次过滤此时我们就需要创建多个自定义过滤器或者内置过滤器和自定义过滤器混合使用。

<tr ng-repeat="p in products | orderBy :'name' | skipRec:2"> 

 

转载于:https://www.cnblogs.com/peterYong/p/10106687.html

你可能感兴趣的文章
农二代蚁族寄居大城市的代价 是不是有点太惨重了
查看>>
获取MSSQL / MYSQL的已用容量
查看>>
使用Vitamio打造自己的Android万能播放器(6)——在线播放(播放列表)
查看>>
C#窗体读取EXCEL存入SQL数据库
查看>>
HDU 3436 Queue-jumpers
查看>>
禁止apache显示目录索引的常见方法(apache禁止列目录)
查看>>
php之道
查看>>
Jquery实现Bootstrap树形列表
查看>>
linux下安装nginx
查看>>
钉钉js依赖库学习
查看>>
转载mysql数据库配置优化
查看>>
Perl图书的一些体会
查看>>
阿里Java开发规范&谷歌Java开发规范&华为Java开发规范&Tab键和空格比较&Eclipse的Tab键设置 总结...
查看>>
android电话状态的监听
查看>>
Linq中string转int的方法
查看>>
循环-12. 打印九九口诀表(15)
查看>>
html5--4-4 audio元素/格式的转换
查看>>
『TensorFlow』读书笔记_进阶卷积神经网络_分类cifar10_上
查看>>
SecureCRT发送键盘按键对应表(转义字符)
查看>>
SQL Server DBA SQL
查看>>