时间:2021-05-28
在这一步你将学习到如何创建自己的显示过滤器。
请重置工作目录:
git checkout -f step-9
现在转到一个手机详细信息页面。在上一步,手机详细页面显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化:√作为“true”;以及×作为“false”。来让我们看看过滤器代码长什么样子。
步骤8和步骤9之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。
定制过滤器
为了创建一个新的过滤器,先创建一个phonecatFilters模块,并且将定制的过滤器注册给这个模块。
app/js/filters.js
angular.module('phonecatFilters', []).filter('checkmark', function() { return function(input) { return input ? '\u2713' : '\u2718'; };});我们的过滤器命名为checkmark。它的输入要么是true,要么是false,并且我们返回两个表示true或false的unicode字符(\u2713和\u2718)。
现在我们的过滤器准备好了,我们需要将我们的phonecatFilters模块作为一个依赖注册到我们的主模块phonecat上。
app/js/app/js
模板
由于我们的模板代码写在app/js/filter.js文件中,所以我们需要在布局模板中引入这个文件。
app/index.html
... <script src="js/controllers.js"></script> <script src="js/filters.js"></script>...在AngularJS模板中使用过滤器的语法是:
{{ expression | filter }}
我们把过滤器应用到手机详细信息模板中:
app/partials/phone-detail.html
测试
过滤器和其他组件一样,应该被测试,并且这些测试实际上很容易完成。
test/unit/filtersSpec.js
describe('filter', function() { beforeEach(module('phonecatFilters')); describe('checkmark', function() { it('should convert boolean values to unicode checkmark or cross', inject(function(checkmarkFilter) { expect(checkmarkFilter(true)).toBe('\u2713'); expect(checkmarkFilter(false)).toBe('\u2718'); })); });});注意在执行任何过滤器测试之前,你需要为phonecatFilters模块配置我们的测试注入器。
执行./scripts/test/sh运行测试,你应该会看到如下的输出:
现在让我们来练习一下AngularJS内置过滤器,在index.html中加入如下绑定:
我们也可以用一个输入框来创建一个模型,并且将之与一个过滤后的绑定结合在一起。在index.html中加入如下代码:
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
总结
现在你已经知道了如何编写和测试一个定制化插件,在步骤10中我们会学习如何用AngularJS继续丰富我们的手机详细信息页面。
以上就是对AngularJS 过滤器的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
相关阅读:AngularJS入门教程之AngularJS表达式AngularJS入门教程之AngularJS指令在前面表达式和指令的教程中了解到,Angular
AngularJS过滤器过滤器可以使用一个管道字符(|)添加到表达式和指令中。AngularJS过滤器AngularJS过滤器可用于转换数据:过滤器描述curr
本文实例分析了smarty高级特性之过滤器的使用方法。分享给大家供大家参考,具体如下:高级特性中过滤器的使用1、预过滤器functionremove_dw_co
今天我们来了解一下AngularJS的内置过滤器先来看看这些内置过滤器使用方法:一个过滤器,不带参数的情况{{expression|filter}}一个过滤器,
Angularjs过滤器是angularjs非常棒的特性之一。有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文。下面显示的是自定义过滤器长什么样