AngularJS 入门4

最新推荐文章于 2024-06-18 23:57:00 发布

绿足

最新推荐文章于 2024-06-18 23:57:00 发布

阅读量437

点赞数

分类专栏： Javascript 文章标签： angularjs javascript 前端框架

Javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了AngularJS中过滤器的基本概念及其使用方法，包括在视图模板和代码中使用过滤器，创建自定义过滤器及如何为其添加参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS 入门4

八. 使用过滤器转化输出

1. 在视图模板中使用过滤器

过滤器也是一种服务，负责对输入的内容进行处理转换，以便更好地向用户显示。

过滤器可以在模板中的{{}}标记中使用：

{{ expression | filter:arg1:arg2}}

预置的过滤器

AngularJS的ng模块实现了一些预置的过滤器，如：currency、number等等，可以直接使用。例如下面的示例将对数字12使用currency过滤器，结果将是"$12.00"：

{{12|currency}}

带参数的过滤器

过滤器也可以有参数，例如下面的示例将数字格式化为"1，234.00":

{{1234|number:2}}

过滤器流水线

过滤器可以应用于另一个过滤器的输出，就像流水线，语法如下：

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

ｊａｖａｓｃｒｉｐｔ实例：

angular.module（"ezstuff"，[]）

.controller（"ezCtrl"，function（$scope）{

$scope.total = 123;

}）;

HTML 实例：

<head>

</head>

<body>

Total salary is {{total|number:2|currency}}

</div>

</body>

</html>

2.在代码中使用过滤器

别忘了过滤器也是一种服务，所以你可以将它注入你的代码中。

和普通的服务不同，过滤器在注入器中注册时，名称被加了一个后缀：Filter。例如，number过滤器的服务名称是：numberFilter，而currency过滤器的服务名称是： currencyFilter。

通常我们的代码被封装在三个地方：控制器、服务、指令。这些地方都支持服务的直接注入，例如：

angular.module（'myModule'，[]）
.controller（function（$scope，numberFilter）{
    //...
}）

有时你需要显式的通过注入器调用过滤器，那么使用注入器的invoke（）方法：

angular.injector（['ng']）
.invoke（function（numberFilter）{
    //...
}）

总之，记住过滤器是一种服务，除了名字需要追加Filter后缀，和其他服务的调用方法没什么区别。

下边的示例在控制器中注入了number和currency过滤器，实现对total的格式化。

ｊａｖａｓｃｒｉｐｔ代码：

angular.module（"ezstuff"，[]）

.controller（"ezCtrl"，function（$scope，numberFilter，currencyFilter）{

$scope.total = currencyFilter（numberFilter（123，2））;

}）;

HTML 代码：

<head>

</head>

<body>

Total salary is {{total}}

</div>

</body>

</html>

3.创建过滤器

和指令类似，过滤器也是一种特殊的服务，与创建一个普通的服务相比较：

必须使用模块的filter（）接口注册服务
必须提供对象工厂/factory方法
对象工程必须返回一个过滤器函数，其第一个参数为输入变量

//定义过滤器类工厂
var filterFactory = function（）{
    //定义过滤器函数
    var filter = function（input，extra_args）{
        //process input and generate output
        return output
    }
};
//在模块上注册过滤器
angular.module（"someModule"，[]）
.filter（"filterName"，filterFactory）;

右边的示例定义了一个将字符串格式化为大写的过滤器

ｊａｖａｓｃｒｉｐｔ实例：

//过滤器对象工厂定义

var ezUCFilterFactory = function（）{

//过滤器对象返回的是一个过滤函数

var filter = function（input）{

return input.toUpperCase（）;

}

return filter;

};

angular.module（"ezstuff"，[]）

//使用模块的filter（）接口注册过滤器

.filter（"ezUC"，ezUCFilterFactory）;

html 代码实例：

<head>

</head>

</html>

4.为过滤器增加参数

过滤器的行为可以通过额外的参数来调整。比如，我们希望改进上一节的示例，使其可以支持仅大写每个单词的首字母。

实现

通过在过滤器类工厂返回的过滤器函数中传入额外的参数，就可以实现这个功能。

var filter = function（input，argument1，argument2）{...}

使用

在使用过滤器时，额外的参数通过前缀:引入，比如

{{expression|filter:argument1:argument2}}

下边的示例实现了支持参数的过滤器ezUC，试着去掉HTML模板中过滤器ezUC的参数，看看显示输出的区别！

ｊａｖａｓｃｒｉｐｔ实例：

//过滤器对象工厂定义

var ezUCFilterFactory = function（）{

//过滤器对象返回的是一个过滤函数

return function（input，cap）{

if（!cap） return input.toUpperCase（）;

var output = input.replace（/\b\w+\b/g， function（word） {

return word.substring（0，1）.toUpperCase（） +word.substring（1）;

}）;

return output;

}

};

angular.module（"ezstuff"，[]）

//使用模块的filter（）接口注册过滤器

.filter（"ezUC"，ezUCFilterFactory）;

HTML实例：

<head>

</head>

</html>