Angularjs中使用Filters详解

更新时间：2016年03月11日 09:11:30 投稿：hebedich

本文给大家总结了下在Angularjs的模板、控制器、或者服务中使用Filters的方法，有需要的小伙伴可以参考下

Filter作用就是接收一个输入，通过某个规则进行处理，然后给用户返回处理后的结果。Filter可以用在模板、控制器、或者服务，同时也会很容易自定义一个Filter过滤器。

在模板中使用Filter

Filter可以用于在视图模板中使用一下语法表达式：

例如：格式{{ 12 | currency }}是使用currency的filter用法，让数字12过滤为货币形式，结果是$12.00。

Filter可以应用到另一个过滤的结果中。这就是所谓的“chaining”，使用语法如下：

Filter中可能需要参数。语法为：

例如：格式{{ 1234 | number:2 }}是使用number的filter用法，将数字1234过滤为有两位小数点的数字，结果为：1,234.00 。

在controller、services、directives中使用filter

你可以在controller、services、directives中使用filter。

为此，你需要将依赖项名称注入到你的controller/service/directive中：filter；例如：一个过滤器是number，你就需要通过使用依赖注入numberFilter。注入的参数是一个函数，该函数将值作为第一个参数，然后用第二个参数来筛选参数。

下面的例子使用了叫做filter的Filter过滤器。这个filter可以在sub arrays的基础上减少arrays。也可以应用在视图模板的标记，就像：{{ctrl.array|filter:'a'}}，这将为‘a'做一个全文搜索。然而，在视图模板中使用filter将会重新对每一个filter过滤，如果数组比较大的会是加载多次的。

因此下面的例子直接调用在控制器中的filter。通过这个，控制器可以在需要是调用filter（例如：当后端数据加载时或者filter的表达式改变时）。

index.html:

<div ng-controller="FilterController as ctrl">
 <div>
  All entries:
  <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
 </div>
 <div>
  Entries that contain an "a":
  <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
 </div>
</div>

script.js:

angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
 this.array = [
  {name: 'Tobias'},
  {name: 'Jeff'},
  {name: 'Brian'},
  {name: 'Igor'},
  {name: 'James'},
  {name: 'Brad'}
 ];
 this.filteredArray = filterFilter(this.array, 'a');
}]);

结果为：

All entries: Tobias Jeff Brian Igor James Brad
Entries that contain an "a": Tobias Brian James Brad

创建自定义filters：

编写自己的filter是非常简单的：只需要在你的模块中注册一个新的filter factory函数。在内部，这里用了filterProvider。这个factory函数应该返回一个新的filter函数并且将输入值作为第一个参数。任何过滤器参数都会作为附加参数传递到过滤器函数中。

这个过滤器函数应该是一个单纯的函数。这意味着它应该stateless 和 idempotent。当输入的函数变化时，angular依赖这些属性并且执行filter。

注意：filter的名称必须是有效的angular表达式标识符。例如uppercase或者orderBy。名字是不允许有特殊的字符，如连字符和点是不允许的。如果你希望你的过滤器有名称空间，那么你可以使用大写（myappSubsectionFilterx）或者下划线（myapp_subsection_filterx）。

下面的示例filter是反写一个字符串。另外，它可以再加一个条件使字符串大写。

index.html

<div ng-controller="MyController">
 <input ng-model="greeting" type="text"><br>
 No filter: {{greeting}}<br>
 Reverse: {{greeting|reverse}}<br>
 Reverse + uppercase: {{greeting|reverse:true}}<br>
 Reverse, filtered in controller: {{filteredGreeting}}<br>
</div>

script.js

angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
 return function(input, uppercase) {
  input = input || '';
  var out = "";
  for (var i = 0; i < input.length; i++) {
   out = input.charAt(i) + out;
  }
  // conditional based on optional argument
  if (uppercase) {
   out = out.toUpperCase();
  }
  return out;
 };
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
 $scope.greeting = 'hello';
 $scope.filteredGreeting = reverseFilter($scope.greeting);
}]);

结果为：

No filter: hello
Reverse: olleh
Reverse + uppercase: OLLEH
Reverse, filtered in controller: olleh

有状态的filters(Stateful filters)

强烈建议写有状态的filters，因为这些不能用angular进行优化，这往往会导致性能问题。许多有状态的filters转换成无状态的filters仅仅通过揭露隐藏的状态作为model，并且将其转化为一个filter参数。

然而，如果你需要写一个有状态的filters，你必须将filter标记为$stateful，这也就意味着它将在每一个$digest周期内执行一次或多次。

index,html

<div ng-controller="MyController">
 Input: <input ng-model="greeting" type="text"><br>
 Decoration: <input ng-model="decoration.symbol" type="text"><br>
 No filter: {{greeting}}<br>
 Decorated: {{greeting | decorate}}<br>
</div>

script.js:

angular.module('myStatefulFilterApp', [])
.filter('decorate', ['decoration', function(decoration) {

 function decorateFilter(input) {
  return decoration.symbol + input + decoration.symbol;
 }
 decorateFilter.$stateful = true;

 return decorateFilter;
}])
.controller('MyController', ['$scope', 'decoration', function($scope, decoration) {
 $scope.greeting = 'hello';
 $scope.decoration = decoration;
}])
.value('decoration', {symbol: '*'});

结果为：

No filter: hello
Decorated: *hello*

下次会写一篇angularjs中filter的常用用法。

您可能感兴趣的文章:

Angular中使用嵌套Form的详细步骤
Angular响应式表单使用显式的、不可变的方式,管理表单在特定的时间点上的状态,下面这篇文章主要给大家介绍了关于Angular中使用嵌套Form的详细步骤,需要的朋友可以参考下
2022-04-04
Angular.js实现动态加载组件详解
这篇文章主要给大家介绍了关于Angular.js实现动态加载组件的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
angular.js指令中的controller、compile与link函数的不同之处
最近一位大神问了我angular.js指令中的controller、compile与link函数的不同，想了想居然回答不出来，所以必须要深入的探究下，下面这篇文章主要介绍了关于angular.js指令中的controller、compile与link函数的不同之处，需要的朋友可以参考下。
2017-05-05
AngularJS中控制器函数的定义与使用方法示例
这篇文章主要介绍了AngularJS中控制器函数的定义与使用方法,结合具体实例形式分析了AngularJS控制器函数的定义、绑定及相关使用技巧,需要的朋友可以参考下
2017-10-10
AngularJS的ng-click传参的方法
本篇文章主要介绍了AngularJS的ng-click传参的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
如何用DevUI搭建自己的Angular组件库
DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！
2021-05-05
从 Angular Route 中提前获取数据的方法详解
这篇文章主要介绍了从 Angular Route 中提前获取数据,通过本文，你将学会使用 resolver，在 Angular App 中应用 resolver，应用到一个公共的预加载导航，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-07-07
Angular 4环境准备与Angular cli创建项目详解
Angular4.0来了，更小，更快，改动少，所以下面这篇文章主要给大家介绍了关于Angular 4环境准备与学会使用Angular cli创建项目的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
2017-05-05
前后端如何实现登录token拦截校验详解
这篇文章主要给大家介绍了关于前后端如何实现登录token拦截校验的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-09-09
Angular中Lazy Loading懒加载陷阱避坑最佳实践
这篇文章主要为大家介绍了Angular中Lazy Loading懒加载陷阱避坑最佳实践,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10