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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
JS全角与半角转化实例(分享)
Jul 04 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
Node.js fs模块原理及常见用途
Oct 22 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
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
保荐人的岗位职责
2013/11/19 职场文书
中英文求职信范文
2014/01/27 职场文书
暑期实践个人总结
2015/03/06 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
东京审判观后感
2015/06/01 职场文书
Android Rxjava3 使用场景详解
2022/04/07 Java/Android
如何优化vue打包文件过大
2022/04/13 Vue.js