最后一步我们做了很多基础训练，所以现在可以做一些简单的事情。我们想增加全文搜索功能(是的，这个真的很简单！)。同时，我们会写一个端到端的测试，因为一个好的端到端测试可以帮助很多。它监控您的应用程序，并在回归发生时快速报告。

请重置工作目录：

git结账-f步骤-3

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

下面列出了步骤2和步骤3之间最重要的区别。你可以在GitHub中看到完全的不同。

控制器

我们不会对控制器进行任何更改。

模板

app/index.html

div class=' container-fluid ' div class=' row-fluid ' div class=' span 2 '！-侧边栏内容- Search:输入ng-model=' query '/div div class=' span 10 '！-正文内容-ul class=' phones ' Li ng-repeat=' phones in phones | filter : query ' { phone。name}} p {{phone。片段}}/p/Li/ul/div/div/div我们现在已经添加了一个输入标记并使用了AngularJS的

这允许用户输入搜索条件并立即看到电话列表的搜索结果。让我们解释一下新代码：

数据绑定：这是AngularJS的核心特性。页面加载时，AngularJS会根据输入框的属性值名称，将其绑定到数据模型中同名的变量，以保证两者的同步。

在这段代码中，用户在输入框中输入的数据名称称为query，它将立即用作列表迭代器(phones | filter:query '中的phone)的过滤器的输入。当数据模型导致迭代器的输入发生变化时，迭代器可以高效地更新DOM，以反映数据模型的最新状态。

使用filter filter:filter函数使用query的值创建一个新数组，该数组只包含与查询匹配的记录。

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

试验

在第2步中，我们学习了如何编写和运行测试。单元测试对于测试用js编写的控制器和其他组件非常方便，但是对于测试DOM操作和应用集成就不方便了。对于这些，端到端测试是更好的选择。

搜索功能完全通过模板和数据绑定来实现，因此我们的第一次端到端测试将验证这些功能是否符合我们的预期。

测试/e2e/场景：

description(' Phone cat App '，function(){ description(' Phone list view '，function(){ beforeach(function(){ browser()。导航到('././app/index . html’)；});它('应该在用户键入搜索框时过滤电话列表'，function() { expect(repeater(')。电话Li’)。count())。托比(3)；输入('查询')。输入(' nexus ')；expect(中继器('。电话Li’)。count())。托比(1)；输入('查询')。输入('摩托罗拉')；expect(中继器('。电话Li’)。count())。托比(2)；});});});虽然这个测试代码的语法看起来非常类似于我们之前用Jasmine编写的单元测试，但是端到端测试使用了AngularJS端到端测试器提供的接口。

运行端到端测试，并在浏览器的新选项卡中打开以下任一项：

node.js的用户：http://localhost 33608000/test/e2e/runner . html

使用其他http服务器的用户：http://localhost :[端口号]/[上下文路径]/test/e2e/runner.html

访问者：http://angular . github.com/angular-phone cat/step-3/test/e2e/runner . html

该测试验证搜索框和迭代器是否正确集成。您可以看到用AngularJS编写端到端测试是多么容易。虽然这个例子只是一个简单的测试，但是很容易用它来构建任何复杂的可读的端到端测试。

练习

向index.html模板添加一个{{query}}绑定，实时显示查询模型的当前值，然后观察它们根据输入框中的值如何变化。现在让我们看看如何让查询模型的值出现在HTML的页面标题上。

您可能认为向标题标签添加绑定就足够了，如下所示：

title Google Phone gallery : { { query } }/title

但是，当您重新加载页面时，根本无法获得预期的结果。这是因为查询模型只在body元素定义的范围内有效。

body ng-controller=' PhoneListctrl '

如果要将标题元素绑定到查询模型，必须将ngController声明移动到HTML元素，因为它是标题和正文元素的共同祖先。

html ng-app ng-controller=' PhoneListctrl '

请务必删除body元素上的ng-controller声明。

当在title元素上绑定两个大括号时，我们可以实现我们的目标，但是您可能会发现当页面加载时，它们已经显示给用户了。更好的解决方案是使用ngBind或ngBindTemplate指令，这些指令在加载页面时对用户是不可见的：

title ng-bind-template=' Google Phone Gallery : { { query } } ' Google Phone Gallery/title

将以下端到端测试代码添加到测试/e2e/场景的描述块中。

它('应该在id为' status '、function(){ expect(element)(# status ')的元素中显示当前的筛选器值。text())。to match(/Current filter : s * $/)；输入('查询')。输入(' nexus ')；expect(元素(' #status ')。text())。to match(/Current filter : nexus s * $/)；//使用(' #status ')只测试绑定值的最后一个断言的替代版本。期望(绑定('查询')。toBe(' nexus ')；});刷新浏览器，端到端测试人员将报告测试失败。为了通过测试，编辑index.html，添加一个id为“status”的div或p元素，内容是一个查询绑定，并添加前缀Current filter:例如：

div id=' status ' current filter : { { query } }/div

向端到端测试添加暂停()；语句，再次运行它。你会发现测试仪暂停了！这使您有机会在测试运行期间检查应用程序的状态。测试应用是实时的！你可以更改搜索内容来证明这一点。有了一点经验，你就会知道在端到端测试中快速发现问题有多重要。

摘要

我们现在增加了全文搜索功能，并且完成了一个测试，证明搜索是正确的！现在让我们继续第4步，看看如何在我们的手机应用程序中添加排序功能。

以上是整理AngularJS迭代器的过滤数据，后续继续补充相关数据。感谢您对本网站的支持！