AngularJS入门教程之迭代器过滤详解


Posted in Javascript onAugust 18, 2016

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能(没错,这个真的非常简单!)。同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙。它监视着你的应用,并且在发生回归的时候迅速报告。

请重置工作目录:

git checkout -f step-3

我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。

步骤2和步骤3之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。

控制器

我们对控制器不做任何修改。

模板

app/index.html

<div class="container-fluid">
 <div class="row-fluid">
  <div class="span2">
   <!--Sidebar content-->

   Search: <input ng-model="query">

  </div>
  <div class="span10">
   <!--Body content-->

   <ul class="phones">
    <li ng-repeat="phone in phones | filter:query">
     {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
   </ul>

    </div>
 </div>
</div>

我们现在添加了一个<input>标签,并且使用AngularJS的$filter函数来处理ngRepeat指令的输入。

这样允许用户输入一个搜索条件,立刻就能看到对电话列表的搜索结果。我们来解释一下新的代码:

数据绑定: 这是AngularJS的一个核心特性。当页面加载的时候,AngularJS会根据输入框的属性值名字,将其与数据模型中相同名字的变量绑定在一起,以确保两者的同步性。

在这段代码中,用户在输入框中输入的数据名字称作query,会立刻作为列表迭代器(phone in phones | filter:query`)其过滤器的输入。当数据模型引起迭代器输入变化的时候,迭代器可以高效得更新DOM将数据模型最新的状态反映出来。

AngularJS入门教程之迭代器过滤详解

使用filter过滤器:filter函数使用query的值来创建一个只包含匹配query记录的新数组。

ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。

测试

在步骤2,我们学习了编写和运行一个测试的方法。单元测试用来测试我们用js编写的控制器和其他组件都非常方便,但是不能方便的对DOM操作和应用集成进行测试。对于这些来说,端到端测试是一个更好的选择。

搜索特性是完全通过模板和数据绑定实现的,所以我们的第一个端到端测试就来验证这些特性是否符合我们的预期。

test/e2e/scenarios.js:

describe('PhoneCat App', function() {

 describe('Phone list view', function() {

  beforeEach(function() {
   browser().navigateTo('../../app/index.html');
  });


  it('should filter the phone list as user types into the search box', function() {
   expect(repeater('.phones li').count()).toBe(3);

   input('query').enter('nexus');
   expect(repeater('.phones li').count()).toBe(1);

   input('query').enter('motorola');
   expect(repeater('.phones li').count()).toBe(2);
  });
 });
});

尽管这段测试代码的语法看起来和我们之前用Jasmine写的单元测试非常像,但是端到端测试使用的是AngularJS端到端测试器提供的接口。

运行一个端到端测试,在浏览器新标签页中打开下面任意一个:

node.js用户:http://localhost:8000/test/e2e/runner.html

使用其他http服务器的用户:http://localhost:[port-number]/[context-path]/test/e2e/runner.html

访客:http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html

这个测试验证了搜素框和迭代器被正确地集成起来。你可以发现,在AngularJS里写一个端到端测试多么的简单。尽管这个例子仅仅是一个简单的测试,但是用它来构建任何一个复杂、可读的端到端测试都很容易。

练习

在index.html模板中添加一个{{query}}绑定来实时显示query模型的当前值,然后观察他们是如何根据输入框中的值而变化。
现在我们来看一下我们怎么让query模型的值出现在HTML的页面标题上。

你或许认为像下面这样在title标签上加上一个绑定就行了:

<title>Google Phone Gallery: {{query}}</title>

但是,当你重载页面的时候,你根本没办法得到期望的结果。这是因为query模型仅仅在body元素定义的作用域内才有效。

<body ng-controller="PhoneListCtrl">

如果你想让<title>元素绑定上query模型,你必须把ngController声明移动到HTML元素上,因为它是title和body元素的共同祖先。

<html ng-app ng-controller="PhoneListCtrl">

一定要注意把body元素上的ng-controller声明给删了。

当绑定两个花括号在title元素上可以实现我们的目标,但是你或许发现了,页面正加载的时候它们已经显示给用户看了。一个更好的解决方案是使用ngBind或者ngBindTemplate指令,它们在页面加载时对用户是不可见的:

<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>

在test/e2e/scenarios.js的describe块中加入下面这些端到端测试代码:

it('should display the current filter value within an element with id "status"',
  function() {
    expect(element('#status').text()).toMatch(/Current filter: \s*$/);
    input('query').enter('nexus');
    expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);
    //alternative version of the last assertion that tests just the value of the binding
    using('#status').expect(binding('query')).toBe('nexus');
});

刷新浏览器,端到端测试器会报告测试失败。为了让测试通过,编辑index.html,添加一个id为“status”的div或者p元素,内容是一个query绑定,再加上Current filter:前缀。例如:

<div id="status">Current filter: {{query}}</div>

在端到端测试里面加一条pause();语句,重新跑一遍。你将发现测试器暂停了!这样允许你有机会在测试运行过程中查看你应用的状态。测试应用是实时的!你可以更换搜索内容来证明。稍有经验你就会知道,这对于在端到端测试中迅速找到问题是多么的关键。

总结

我们现在添加了全文搜索功能,并且完成一个测试证明了搜索是对的!现在让我们继续到步骤4来看看给我们的手机应用增加排序功能。

以上就是对AngularJS 迭代器过滤资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
JavaScript 事件参考手册
Dec 24 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
jQuery动画与特效详解
Feb 01 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
webpack之devtool详解
Feb 10 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 #Javascript
AngularJS入门教程之静态模板详解
Aug 18 #Javascript
AngularJS入门教程引导程序
Aug 18 #Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 #Javascript
js 获取站点应用名的简单实例
Aug 18 #Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 #Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 #Javascript
You might like
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
使用pip安装python库的多种方式
2019/07/31 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
群众路线教育实践活动方案
2014/02/02 职场文书
运动会入场词50字
2014/02/20 职场文书
十八大演讲稿
2014/05/22 职场文书
三八妇女节致辞
2015/07/31 职场文书
班级班风口号大全
2015/12/25 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
python实现A*寻路算法
2021/06/13 Python
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers