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 相关文章推荐
js判断屏幕分辨率的代码
Jul 16 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
vue实现登录拦截
Jun 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实现采集程序原理和简单示例代码
2007/03/18 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php cli换行示例
2014/04/22 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP new static 和 new self详解
2017/02/19 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
初中军训感想300字
2014/03/05 职场文书
品牌转让协议书
2014/08/20 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
小组口号霸气押韵
2015/12/24 职场文书