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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
async/await让异步操作同步执行的方法详解
Nov 01 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 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
python数据清洗系列之字符串处理详解
2017/02/12 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
Python ini文件常用操作方法解析
2020/04/26 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
交通事故委托书范本
2014/09/28 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL