AngularJS中的过滤器filter用法完全解析

更新时间：2016年04月22日 18:00:51 作者：hudeyong926

这篇文章主要介绍了AngularJS中的过滤器filter用法,包括Angular中一些常用的自带的过滤器的列举以及自定义filter的方法,需要的朋友可以参考下

在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 = ''; 
  } 
}

您可能感兴趣的文章:

angularjs中ng-attr的用法详解
这篇文章主要给大家介绍了angularjs中ng-attr的用法,文中通过实例代码介绍的很详细，有需要的朋友可以参考借鉴，下面来一起看看吧。
2016-12-12
AngularJS ngModel实现指令与输入直接的数据通信
这篇文章主要介绍了AngularJS ngModel实现指令与输入直接的数据通信的相关资料,需要的朋友可以参考下
2016-09-09
解决ionic和angular上拉加载的问题
这篇文章主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下
2017-08-08
浅谈Angular HttpClient简单入门
本篇文章主要介绍了浅谈Angular HttpClient 简单入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下
2014-12-12
Angular Renderer (渲染器)的具体使用
这篇文章主要介绍了Angular Renderer (渲染器)的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
angular.js指令中transclude选项及ng-transclude指令详解
这篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude选项的相关资料，文中介绍的非常详细，并给出了完整的示例代码大家参考学习，需要的朋友们下面来一起看看吧。
2017-05-05
详解Angular项目中共享模块的实现
本文主要介绍了Angular的共享模块的实现，对此感兴趣的同学，可以实验一下
2021-05-05
AngularJS基于http请求实现下载php生成的excel文件功能示例
这篇文章主要介绍了AngularJS基于http请求实现下载php生成的excel文件功能,结合实例形式分析了AngularJS http请求及文件下载等相关操作技巧,需要的朋友可以参考下
2018-01-01
Angular.Js的自动化测试详解
当Angular项目的规模到达一定的程度，就需要进行测试工作了。为什么要自动化测试？1，提高产出质量。2，减少重构时的痛。反正我最近重构多了，痛苦经历多了。3，便于新人接手。下面这篇文章就给大家详细介绍了Angular.Js的自动化测试，有需要的朋友们可以参考借鉴。
2016-12-12

AngularJS中的过滤器filter用法完全解析

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具