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 相关文章推荐
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
JavaScript效率调优经验
2009/06/04 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
Python实现把数字转换成中文
2015/06/29 Python
python调用API实现智能回复机器人
2018/04/10 Python
python logging 日志的级别调整方式
2020/02/21 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Linux的主要特性
2014/10/06 面试题
大学生个人求职口试自我评价
2014/02/16 职场文书
技术负责人任命书
2014/06/05 职场文书
党建目标管理责任书
2014/07/25 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
青年文明号汇报材料
2014/12/23 职场文书
高中信息技术教学反思
2016/02/16 职场文书
小学三年级作文之写景
2019/11/05 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Pytest中skip skipif跳过用例详解
2021/06/30 Python
mysql事务隔离级别详情
2021/10/24 MySQL
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android