《AngularJS深度剖析与最佳实践》一2.7 过滤器

简介:

本节书摘来自华章出版社《AngularJS深度剖析与最佳实践》一书中的第2章,第2.7节,作者 雪狼 破狼 彭洪伟,更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.7 过滤器

我们在第1章中使用了多个系统内置的过滤器(filter),还写了一个自定义过滤器,这里我们再系统化的从理论层面讲一下。
过滤器标准的定义方式是:

angular.module('com.ngnice.app').filter('myFilter', function(/* 这里可以用参数进行依赖注入 */) {
    return function(input) {
        var result;
        // TODO: 把input变换成result
        return result;
    };
});

可以看出,过滤器是一个特殊的函数,它返回一个函数,这个函数接收的第一个参数就是被过滤的变量,如使用{{1|myFilter}}时,这个input参数的值就是1,当这个值是个变量时,它的变化会导致myFilter再次被执行。
过滤器还可以接收第二个参数,乃至第N个参数,如:

return function(input, arg1, arg2, arg3) {
    ...
};

而使用者则通过{{1|myFilter:2:3:4}}的形式调用它。这种情况下,arg1的值为2,arg2的值为3,arg3的值为4。
从使用者的角度,我们可以把filter看做一个函数,它负责接收输入,然后转换成输出。每当输入参数发生变化时,它就被执行,其输出会被视图使用。
filter除了可以用在绑定表达式之外,还可以用在指令中通过值绑定的属性,如

...。
由于其简单灵巧,filter非常适合复用。官方提供的几个filter就有很多种用法,读者可以参照官方的API文档和实战篇的案例,自行尝试用ng-repeat, filter, orderBy的组合来实现具有前端过滤功能的表格,这有助于对过滤器的深入理解。
相关文章
|
7月前
|
缓存 前端开发 UED
AngularJS的表单验证:深度探索与实践
【4月更文挑战第28天】本文深入探讨了AngularJS的表单验证,涉及基础用法、自定义规则和性能优化。AngularJS通过表单控制器和指令实现验证,ngModelController处理逻辑并更新错误状态。自定义验证器函数可扩展业务逻辑,性能问题可通过减少无效验证、异步处理和缓存解决。关注用户体验,提供清晰错误提示和一致验证规则至关重要。AngularJS的表单验证功能强大,适配复杂需求,助力构建高效、易用的验证系统。
|
7月前
|
前端开发 JavaScript 开发者
详细介绍 AngularJS 表单的各种特性、用法和最佳实践
详细介绍 AngularJS 表单的各种特性、用法和最佳实践
115 1
|
安全 前端开发 测试技术
《AngularJS深度剖析与最佳实践》一导读
现在,软件不但运行在PC上,还要运行在智能手机上,运行在各种Pad上,屏幕分辨率更是多到让研发和测试工程师发怵的地步。
1428 0