AngularJS中的过滤器filter用法完全解析  更新时间:2016年04月22日 18:00:51   作者:hudeyong926   这篇文章主要介绍了AngularJS中的过滤器filter用法,包括Angular中一些常用的自带的过滤器的列举以及自定义filter的方法,需要的朋友可以参考下 在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单 在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示: {{ name | uppercase }} 当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例: app.controller(‘DemoController’, [‘$scope’, ‘$filter’, function($scope, $filter) { $scope.name = $filter(‘lowercase’)(‘Ari’); }]); 如何传递参数到filter呢?只需要把参数放在filter之后,中间加个冒号(如果有多个参数要传递,在每个参数后加上冒号)比如,数字过滤器可以帮助我们限制数字的位数,如果想显示两位小数,加上number:2就可以了 {{ 123.456789 | number:2 }} filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组。 比如,在客户端搜索时,我们可以快速的从数组中过滤出我们想要的结果。 这个filter方法接收一个string,object,或者function参数用来选择/移除数组元素。 下满我们具体来看: 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ “lower cap string” | uppercase }} //结果:LOWER CAP STRING {{ “TANK is GOOD” | lowercase }} //结果:tank is good  |这里的竖线是一种管道功能,如果对linux比较熟悉的话,这块的|根linux的管道功能,基本是一样的2,json格式化 {{ {foo: “bar”, baz: 23} | json }} //结果:{ “foo”: “bar”, “baz”: 23 } 注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。 3,date格式化 mysql时间戳 ng-bind=”message.time * 1000 | date:’yyyy-mm-dd'”   {{ 1304375948024 | date:’medium’}} //May 03, 2011 06:39:08 PM {{ 1304375948024 | date }} //结果:May 3, 2011 {{ 1304375948024 | date:”MM/dd/yyyy @ h:mma” }} //结果:05/03/2011 @ 6:39AM {{ 1304375948024 | date:”yyyy-MM-dd hh:mm:ss” }} //结果:2011-05-03 06:39:08  4,number格式化 {{ 1.234567 | number:1 }} //结果:1.2 {{ 1234567 | number }} //结果:1,234,567  5,currency货币格式化 {{ 250 | currency }} //结果:$250.00 {{ 250 | currency:”RMB ¥ ” }} //结果:RMB ¥ 250.00  6,filter查找 只能查value,不能查key {{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] | filter:’s’}} //查找含有有s的行 //上例结果:[{“age”:12,”id”:11,”name”:”sunm xing”},{“age”:44,”id”:12,”name”:”test abc”}] {{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] | filter:{‘name’:’ip’} }} //查找name like ip的行 //上例结果:[{“age”:20,”id”:10,”name”:”iphone”}] $filter(‘number’)(30000, 2); var jsonString = $filter(‘json’)({“age”:12,”id”:11,”name”:”sunm xing”},{“age”:44,”id”:12,”name”:”test abc”}])  7,limitTo字符串,对像的截取 {{ “i love tank” | limitTo:6 }} //结果:i love {{ “i love tank” | limitTo:-4 }} //结果:tank {{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] | limitTo:1 }} //结果:[{“age”:20,”id”:10,”name”:”iphone”}]  8,orderBy对像排序 {{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] | orderBy:’id’:true }} //根id降序排 {{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] | orderBy:’id’ }} //根据id升序排 {{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] | orderBy:[‘-age’,’name’] }} 二,自定filter功能 filter的自定义方式也很简单,使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。 app.filter(‘过滤器名称’,function(){ return function(需要过滤的对象,过滤器参数1,过滤器参数2,…){ //…做一些事情 return 处理后的对象; } }); 我找了一个基本angularjs的mvc框架,phonecat,自定义filter也是在这基础写的,这个框架挺好用的。 filters.js添加一个module angular.module(‘tanktest’, []).filter(‘tankreplace’, function() { return function(input) { return input.replace(/tank/, “=====”) }; }); html中调用 {{ “TANK is GOOD” | lowercase |tankreplace}} //结果:===== is good  注意:| lowercase |tankreplace管道命令可以有多个 yourApp.filter(‘orderObjectBy’, function() { return function(items, field, reverse) { var filtered = []; angular.forEach(items, function(item) { filtered.push(item); }); filtered.sort(function (a, b) { return (a[field] > b[field] ? 1 : -1); }); if(reverse) filtered.reverse(); return filtered; }; }); 该过滤器将对象转换成标准的数组并把它通过您指定字段排序。您可以使用orderObjectBy过滤器酷似ORDERBY,包括字段名后一个布尔值,以指定的顺序是否应该得到扭转。换句话说,假的是升序,真正的下降。html调用 {{ item.color }}   排序搜索 产品编号 产品名称 产品价格 {{item.id}} {{item.name}} {{item.price | currency: ‘¥’}} angularjs //默认排序字段 $scope.orderType = ‘id’; $scope.order = ‘-‘; $scope.changeOrder = function(type) { console.log(type); $scope.orderType = type; if ($scope.order === ”) { $scope.order = ‘-‘; }else{ $scope.order = ”; } } 您可能感兴趣的文章: Javascript中关于Array.filter()的妙用详解 JavaScript 数组some()和filter()的用法及区别 jquery.fastLiveFilter.js实现输入自动过滤的方法 JavaScript中利用Array filter() 方法压缩稀疏数组 JavaScript之filter_动力节点Java学院整理 详解AngularJS中的filter过滤器用法 Vue.js报错Failed to resolve filter问题的解决方法 AngularJS过滤器filter用法总结 详解AngularJS Filter(过滤器)用法 JavaScript中filter的用法实例分析 AngularJS filter 相关文章 AngularJS使用ng-app自动加载bootstrap框架问题分析 这篇文章主要介绍了AngularJS使用ng-app自动加载bootstrap框架问题,分析了前面文章中所述的ng-app自动加载bootstrap出现的错误原因与相应的解决方法,需要的朋友可以参考下 2017-01-01 angularJs中跳转到指定的锚点实例($anchorScroll) 今天小编就为大家分享一篇angularJs中跳转到指定的锚点实例($anchorScroll),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 AngularJS自定义控件实例详解 这篇文章主要介绍了AngularJS自定义控件,结合实例形式详细分析了AngularJS自定义指令与模板操作的相关函数与使用技巧,需要的朋友可以参考下 2016-12-12 Angular客户端请求Rest服务跨域问题的解决方法 本篇文章主要介绍了Angular客户端请求Rest服务跨域问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-09-09 cnpm加速Angular项目创建的方法 这篇文章主要介绍了cnpm加速Angular项目创建的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 基于AngularJS实现的工资计算器实例 这篇文章主要介绍了基于AngularJS实现的工资计算器,结合具体实例形式分析了AngularJS数值计算相关操作技巧,需要的朋友可以参考下 2017-06-06 Bootstrap与Angularjs的模态框实例代码 这篇文章主要介绍了Bootstrap与Angularjs的模态框实例代码,需要的朋友可以参考下 2017-08-08 Angular ng-animate和ng-cookies用法详解 本文讲一下Angular中动画应用的部分。这篇文章主要介绍了Angular ng-animate和ng-cookies用法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 AngularJS中实现显示或隐藏动画效果的方式总结 AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有功能,其中一项主要的特性是Angular对动画的支持。下面通过本文给大家介绍AngularJS中实现显示或隐藏动画效果的方式总结,对angularjs动画效果相关知识感兴趣的朋友一起学习 2015-12-12 AngularJS使用angular-formly进行表单验证 这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下 2015-12-12 最新评论

在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单

在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示:

{{ name | uppercase }}

2016422175829103.jpg (363×121)

当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例:

app.controller('DemoController', ['$scope', '$filter', 
 function($scope, $filter) {
 
  $scope.name = $filter('lowercase')('Ari');
}]);

如何传递参数到filter呢?只需要把参数放在filter之后,中间加个冒号(如果有多个参数要传递,在每个参数后加上冒号)比如,数字过滤器可以帮助我们限制数字的位数,如果想显示两位小数,加上number:2就可以了

{{ 123.456789 | number:2 }}

filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组。

比如,在客户端搜索时,我们可以快速的从数组中过滤出我们想要的结果。

这个filter方法接收一个string,object,或者function参数用来选择/移除数组元素。

下满我们具体来看:

一,内置的过滤器
1,uppercase,lowercase大小转换

{{ "lower cap string" | uppercase }}   //结果:LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //结果:tank is good 

 |这里的竖线是一种管道功能,如果对linux比较熟悉的话,这块的|根linux的管道功能,基本是一样的2,json格式化

{{ {foo: "bar", baz: 23} | json }}  //结果:{ "foo": "bar", "baz": 23 } 

注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。

3,date格式化

mysql时间戳 ng-bind=”message.time * 1000 | date:’yyyy-mm-dd'”  

{{ 1304375948024 | date:'medium'}}   //May 03, 2011 06:39:08 PM 
{{ 1304375948024 | date }}             //结果:May 3, 2011 
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}   //结果:05/03/2011 @ 6:39AM 
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}  //结果:2011-05-03 06:39:08 

 4,number格式化

{{ 1.234567 | number:1 }}  //结果:1.2  
{{ 1234567 | number }}    //结果:1,234,567  

 5,currency货币格式化

{{ 250 | currency }}         //结果:$250.00  
{{ 250 | currency:"RMB ¥ " }}    //结果:RMB ¥ 250.00  

 6,filter查找 只能查value,不能查key

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:'s'}}  //查找含有有s的行 
 
//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:{'name':'ip'} }}  //查找name like ip的行 
//上例结果:[{"age":20,"id":10,"name":"iphone"}] 
 
$filter('number')(30000, 2); 
var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]) 

 7,limitTo字符串,对像的截取

{{ "i love tank" | limitTo:6 }}      //结果:i love 
{{ "i love tank" | limitTo:-4 }}     //结果:tank 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | limitTo:1 }}   //结果:[{"age":20,"id":10,"name":"iphone"}] 

 8,orderBy对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id':true }}    //根id降序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id' }}      //根据id升序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:['-age','name'] }} 

二,自定filter功能
filter的自定义方式也很简单,使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。

app.filter('过滤器名称',function(){ 
  return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
    //...做一些事情  
    return 处理后的对象; 
  } 
});  

我找了一个基本angularjs的mvc框架,phonecat,自定义filter也是在这基础写的,这个框架挺好用的。
filters.js添加一个module

angular.module('tanktest', []).filter('tankreplace', function() { 
  return function(input) { 
    return input.replace(/tank/, "=====") 
  }; 
}); 

html中调用

{{ "TANK is GOOD" | lowercase |tankreplace}}  //结果:===== is good 

 注意:| lowercase |tankreplace管道命令可以有多个

yourApp.filter('orderObjectBy', function() { 
 return function(items, field, reverse) { 
  var filtered = []; 
  angular.forEach(items, function(item) { 
   filtered.push(item); 
  }); 
  filtered.sort(function (a, b) { 
   return (a[field] > b[field] ? 1 : -1); 
  }); 
  if(reverse) filtered.reverse(); 
  return filtered; 
 }; 
}); 

该过滤器将对象转换成标准的数组并把它通过您指定字段排序。您可以使用orderObjectBy过滤器酷似ORDERBY,包括字段名后一个布尔值,以指定的顺序是否应该得到扭转。换句话说,假的是升序,真正的下降。html调用

<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li> 

 
排序搜索

<input type="text" ng-model="search" class="form-control" placeholder="Search"> 
<thead> 
  <tr> 
    <!-- ng-class="{dropup:true}" --> 
    <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}"> 
      产品编号 
      <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> 
      产品名称 
      <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"> 
      产品价格 
      <span ng-class="{orderColor: orderType === 'price'}" class="caret"></span> 
    </th> 
  </tr> 
</thead> 
<tbody> 
  <tr ng-repeat="item in productData | filter: search | orderBy:order + orderType"> 
    <td>{{item.id}}</td> 
    <td>{{item.name}}</td> 
    <td>{{item.price | currency: '¥'}}</td> 
  </tr> 
</tbody> 

angularjs

//默认排序字段 
$scope.orderType = 'id'; 
 
$scope.order = '-'; 
 
$scope.changeOrder = function(type) { 
  console.log(type); 
  $scope.orderType = type; 
 
  if ($scope.order === '') { 
    $scope.order = '-'; 
  }else{ 
    $scope.order = ''; 
  } 
} 

您可能感兴趣的文章:

  • Javascript中关于Array.filter()的妙用详解
  • JavaScript 数组some()和filter()的用法及区别
  • jquery.fastLiveFilter.js实现输入自动过滤的方法
  • JavaScript中利用Array filter() 方法压缩稀疏数组
  • JavaScript之filter_动力节点Java学院整理
  • 详解AngularJS中的filter过滤器用法
  • Vue.js报错Failed to resolve filter问题的解决方法
  • AngularJS过滤器filter用法总结
  • 详解AngularJS Filter(过滤器)用法
  • JavaScript中filter的用法实例分析
张贴在3