Angular系列----AngularJS入门教程04：迭代器过滤（转载）
我们在上一步做了很多基础性的训练，所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能（没错，这个真的非常简单！）。同时，我们也会写一个端到端测试，因为一个好的端到端测试可以帮上很大忙。它监视着你的应用，并且在发生回归的时候迅速报告。
请重置工作目录：
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将数据模型最新的状态反映出来。
使用
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来看看给我们的手机应用增加排序功能。
Angular系列----AngularJS入门教程04：迭代器过滤（转载）的更多相关文章
- Angular系列---- AngularJS入门教程03：AngularJS 模板（转载）
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程01：AngularJS模板 （转载）
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程00：引导程序（转载）
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- Angular系列------AngularJS入门教程：导言和准备（转载）
学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...
- Angular系列----AngularJS入门教程05：双向绑定（转载）
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- Angular系列----AngularJS入门教程02：静态模板（转载）
为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两 ...
- [转载]AngularJS入门教程04：双向绑定
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- AngularJS入门教程：日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
随机推荐
- 无线局域网络 WIFI/WAPI/WLAN区别浅析
WIFI和WAPI的区别 既然WIFI和WAPI都是WLAN的传输协议,那么两者究竟都有怎样的区别? 首先第一点区别在于,两者的缔造者不一样.WIFI是又国外制定的一个协议,而WAPI是由中国制定的, ...
- MDT 2010驱动管理新方法。
参考:https://4sysops.com/archives/driver-deployment-with-microsoft-deployment-toolkit-mdt-part-1-os-de ...
- 关于Domino数据库的软删除
在Domino的数据库属性的 “高级” 附签(选择文件->数据库->属性),选中“允许软删除”,这样我们就启用了软删除功能,当一个文档没有删除的时候我们可以使用NotesDatabase的 ...
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（三）
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...
- 互联网的寒冬来了，BAT都不社招了
一 总理上次来到创业街,是四个月,要不就是五个月前了. 之后,全国创业形势一路走红,锣鼓喧天鞭炮齐鸣.大众创业万众创新,颇有大炼钢铁亩产万斤之势,尤其在媒体上. 再之后,2015 进入下半年,风投圈的 ...
- 游戏服务器ID生成器组件
游戏服务器程序中,经常需要生成全局的唯一ID号,这个功能很常用,本文将介绍一种通用ID生成组件.游戏服务器程序中使用此组件的场景有: 创建角色时,为其分配唯一ID 创建物品时,每个物品需要唯一ID 创 ...
- Struts2返回json
Action怎么返回json类型数据?方法1,使用struts2的插件struts2-json-plugin-2.3.8.jar(在下载的strut2库文件夹中). 在struts2.xml中对要返回 ...
- BugTracker.NET的配置
需求管理+任务管理+bug管理+看板管理 要求一定要简单,切忌不要太复杂 之前用的禅道的,功能虽然很强大,但是忒复杂了,用不下去. 几点需要注意的地方: 1.web.config里邮件的地方有好几个地 ...
- 深入解析Oracle 10g中SGA_MAX_SIZE和SGA_TARGET参数的区别和作用
原文链接:http://m.blog.csdn.net/blog/aaron8219/40037005 SGA_MAX_SIZE是从9i以来就有的作为设置SGA大小的一个参数,而SGA_TARGET则 ...
- jqGrid标题行与第一行之间有很大空白的问题解决。
如题的问题,网上找了很久,都没有解决方案.最后发现,问题不在jqgrid的配置代码,问题在前台HTML代码. <table id="grid" height="30 ...