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的时候写的学习笔记
Dec 30 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 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实现分页的一个示例
2006/10/09 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
商务日语毕业生自荐信范文
2013/11/14 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2015年小学开学寄语
2015/02/27 职场文书
绿里奇迹观后感
2015/06/15 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers