AngularJS入门教程之过滤器详解


Posted in Javascript onAugust 19, 2016

在这一步你将学习到如何创建自己的显示过滤器。

请重置工作目录:

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

...
angular.module('phonecat', ['phonecatFilters']).
...

模板

由于我们的模板代码写在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

...
  <dl>
   <dt>Infrared</dt>
   <dd>{{phone.connectivity.infrared | checkmark}}</dd>
   <dt>GPS</dt>
   <dd>{{phone.connectivity.gps | checkmark}}</dd>
  </dl>
...

测试

过滤器和其他组件一样,应该被测试,并且这些测试实际上很容易完成。

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运行测试,你应该会看到如下的输出:

Chrome: Runner reset.
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
 Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)

现在让我们来练习一下AngularJS内置过滤器,在index.html中加入如下绑定:

  1. {{ "lower cap string" | uppercase }}
  2. {{ {foo: "bar", baz: 23} | json }}
  3. {{ 1304375948024 | date }}
  4. {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

我们也可以用一个输入框来创建一个模型,并且将之与一个过滤后的绑定结合在一起。在index.html中加入如下代码:

<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}

总结

现在你已经知道了如何编写和测试一个定制化插件,在步骤10中我们会学习如何用AngularJS继续丰富我们的手机详细信息页面。

以上就是对AngularJS 过滤器的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
AngularJS表单基本操作
Jan 09 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 #Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 #Javascript
js仿腾讯QQ的web登陆界面
Aug 19 #Javascript
基于WebUploader的文件上传js插件
Aug 19 #Javascript
JS获取checkbox的个数简单实例
Aug 19 #Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 #Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 #Javascript
You might like
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
村优秀党员事迹材料
2014/01/15 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
离婚财产分割协议书
2015/08/11 职场文书