您的位置：首页 > Web前端 > AngularJS

Angularjs-filter(过滤器)

2015-10-26 09:58 861 查看
点击查看AngularJS系列目录
转载请注明出处：http://www.cnblogs.com/leosx/

过滤器filter是用来格式化显示表达式的值给用户看的。我们可以在模板(template)、控制器(controller)、服务(service)中使用；并且你可以很容易的就自定义属于自己的过滤器了。了解更多，点击
filterProvider


在视图模板(template)中使用过滤器

过滤器可以通过以下语法在视图模板的表达式中进行使用：

{{ expression | filter }}


例如： 
{{ 12 | currency }}
通过使用
currency
 过滤器来将数字12给格式化为 
$12.00
.

过滤器也可以用在其它过滤器的结果上，对其它过滤器过滤后的结果再次进行过滤。
{{ expression | filter1 | filter2 | ... }}

过滤器也可以拥有参数，语法如下：

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


例如： 
{{ 1234 | number:2 }}
是使用
number
 过滤器将数字1234给过滤为显示小数点儿后两位。过滤后的结果是：
1,234.00
.

在控制器(controller)、服务(service)、指令(directive)中使用过滤器

要想在控制器、服务、指令中使用过滤器。首先要将过滤器给注入到controller/service/directive中去；例如：通过注入
numberFilter
过滤器，来使用数字过滤器。

来一个从数组中查找符合条件的数据的过滤器的示例：

文件一：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');
}]);


效果图：





自定义过滤器

编写自定义过滤器是非常easy的哈！只用在你的模块(module)上注册一下顾虑器的工厂函数就行了。它的实现，其实是使用了 
filterProvider
.这个工厂函数会返回一个新的过滤器函数，并且它的第一个参数是输入值。任何过滤器的参数都是使用附加的方式传输过来的。

过滤器方法应该是一个纯正的函数(纯正的function)，也就意味着过滤器是没有状态的，而且也是幂等的。

过滤器的名称必须是有效的Angular表达式(
Expressions
)标识，例如：
uppercase
和 
orderBy
.过滤器名称中不能有特殊字符(下划线可以).

下面的例子中的过滤器用来反转一个字符串，并且有一个参数，用来决定是否转为大写！

第一个文件：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>
</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', function($scope) {
$scope.greeting = 'hello';
}]);


效果图：





状态过滤器

我们强烈鼓励编写过滤器是有状态的，因为这些代码是不能被Angular进行优化的，所以常常会造成性能问题。许多有状态的过滤器也可以通过在model(模型)中放一个隐藏的数据，并且把这个model变成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: '*'});


效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航