首页 web前端 js教程 Angularjs中使用Filters详解_AngularJS

Angularjs中使用Filters详解_AngularJS

May 16, 2016 pm 03:11 PM
angularjs filters

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

在模板中使用Filter

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

{{ expression | filter }}

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

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

{{ expression | filter1 | filter2 | ... }}

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

{{ expression | filter:argument1:argument2:... }}

例如:格式{{ 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:

1

2

3

4

5

6

7

8

9

10

11

<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:

1

2

3

4

5

6

7

8

9

10

11

12

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');

}]);

登录后复制

结果为:

1

2

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

1

2

3

4

5

6

7

8

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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);

}]);

登录后复制

结果为:

1

2

3

4

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

1

2

3

4

5

6

7

<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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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: '*'});

登录后复制

结果为:

1

2

No filter: hello

Decorated: *hello*

登录后复制

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

VUE3基础教程:使用filters进行数据过滤 VUE3基础教程:使用filters进行数据过滤 Jun 15, 2023 pm 08:37 PM

VUE3基础教程:使用filters进行数据过滤

Vue 中使用 filters 实现数据格式化及数据过滤的技巧 Vue 中使用 filters 实现数据格式化及数据过滤的技巧 Jun 25, 2023 pm 06:49 PM

Vue 中使用 filters 实现数据格式化及数据过滤的技巧

2022年最新5款的angularjs教程从入门到精通 2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

2022年最新5款的angularjs教程从入门到精通

使用PHP和AngularJS搭建一个响应式网站,提供优质的用户体验 使用PHP和AngularJS搭建一个响应式网站,提供优质的用户体验 Jun 27, 2023 pm 07:37 PM

使用PHP和AngularJS搭建一个响应式网站,提供优质的用户体验

使用PHP和AngularJS构建Web应用 使用PHP和AngularJS构建Web应用 May 27, 2023 pm 08:10 PM

使用PHP和AngularJS构建Web应用

使用PHP和AngularJS开发一个在线文件管理平台,方便文件管理 使用PHP和AngularJS开发一个在线文件管理平台,方便文件管理 Jun 27, 2023 pm 01:34 PM

使用PHP和AngularJS开发一个在线文件管理平台,方便文件管理

AngularJS基础入门介绍 AngularJS基础入门介绍 Apr 21, 2018 am 10:37 AM

AngularJS基础入门介绍

如何在PHP编程中使用AngularJS? 如何在PHP编程中使用AngularJS? Jun 12, 2023 am 09:40 AM

如何在PHP编程中使用AngularJS?

See all articles