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

AngularJS的迭代器过滤：一个详尽的知识指南附示例代码

在我们的应用开发过程中，我们已经掌握了诸多基础知识，接下来我们将进一步一个强大而实用的功能——AngularJS的迭代器过滤。我们将详细介绍如何使用AngularJS的过滤器功能实现全文检索，同时还将提供一个完整的示例代码供您参考。如果您对这方面感兴趣，那么请继续阅读。

让我们重置工作目录并切换到step-3的状态。我们的应用现在已经拥有一个搜索框，用户可以在其中输入关键词来搜索手机列表中的项目。这个搜索功能正是通过AngularJS的迭代器过滤实现的。

在控制器部分，我们并没有做任何修改。我们的焦点主要集中在模板上。让我们来看一下app/index.html的代码。在这个模板中，我们添加了一个输入框，并使用AngularJS的过滤器函数来处理ngRepeat指令的输入。这意味着用户可以实时地看到他们的搜索结果如何影响电话列表。

现在让我们详细一下这段代码。数据绑定是AngularJS的核心特性之一。在我们的例子中，用户在搜索框中输入的数据（名为query）会与数据模型中的相同名称的变量同步。当用户在搜索框中输入时，这个查询值会被用作列表迭代器（phone in phones | filter:query）的过滤器输入。当数据模型发生变化时（即用户输入新的查询），迭代器会立即更新DOM以反映的数据模型状态。

这个过程是如何运作的呢？实际上，filter过滤器会使用query的值来创建一个新的数组，这个数组只包含与查询匹配的记录。然后，ngRepeat会根据这个由filter过滤器生成的手机记录数组来自动更新视图。所有这些对于开发者来说都是透明的。我们不需要写任何额外的代码来手动处理这些过程，只需利用AngularJS的强大功能即可。

PhoneCat App的端到端测试之旅

位于test文件夹下的scenarios.js文件内，有一个名为PhoneCat App的测试描述。它详细阐述了一个关于电话列表视图的功能测试。在开始之前，浏览器被引导至../../app/index.html页面。

这个端到端测试的核心在于验证电话列表是否能随着用户在搜索框中的输入进行过滤。当测试运行时，期望的初始电话列表项数量是3个。当在输入框键入“nexus”后，列表项应减少至1个；再输入“motorola”，列表项则进一步减少至2个。这是通过AngularJS的端到端测试器接口实现的，它模拟了真实用户的操作，确保了应用的交互性符合预期。

对于运行这个端到端测试，你需要打开特定的URL。对于node.js用户来说，可以通过访问

这个端到端测试的例子虽然简单，但它是构建任何复杂且可读性强的大型端到端测试的基础。为了进一步理解和深化测试的过程，我们可以尝试在index.html模板中添加一个{{query}}绑定，以实时显示query模型的当前值。通过观察这些值随着输入框内容的改变而变化的实时数据，我们可以更深入地理解AngularJS的工作原理。

仅仅在title标签上添加绑定是无法实现预期结果的。这是因为HTML元素的scope通常比body元素更广泛。要想让title元素绑定到query模型上，我们需要将ngController声明移动到HTML元素上，使其成为title和body元素的共同祖先。通过这种方式，即使在页面重载时，title元素也能正确地显示query模型的值。在开发过程中需要注意调整HTML结构以确保绑定的有效性。在这个过程中，你可能会发现页面加载时就已经显示给用户看了某些绑定效果，这也是验证测试有效性的一个重要方面。重构后的文章如下：

AngularJS：使用ngBind与ngBindTemplate优化用户体验

在我们深入AngularJS的旅程中，我们发现了一种更为优雅和强大的方式来提高用户体验——使用ngBind和ngBindTemplate指令。这些指令在页面加载时对用户是不可见的，确保用户可以无缝地沉浸在应用体验中。

设想我们正在构建一个Google Phone Gallery应用，其中包含一个动态标题，显示当前的搜索查询。我们可以使用ngBindTemplate指令来实现这一功能。例如：

``

在我们的端到端测试中，我们需要确保应用的某些功能按预期工作。让我们以在test/e2e/scenarios.js中的描述块为例，我们添加了一些针对SEO优化的端到端测试代码，以检查应用的搜索功能。其中一项测试是验证当前过滤值是否在一个具有特定id的元素中正确显示。

```javascript

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$/);

// 使用另一种方式验证绑定值

using('status').expect(binding('query')).toBe('nexus');

});

```

为了通过这项测试，我们需要在index.html中添加一个带有id为“status”的div或p元素，其内容是一个带有前缀“Current filter:”的query绑定。例如：

`

在我们的端到端测试中，添加一个pause()语句以暂停测试的执行。这将允许我们在测试运行过程中查看应用的状态，实时体验测试应用的功能。当你更换搜索内容时，你将看到测试器如何验证搜索功能的正确性。这种实时反馈对于迅速定位和解决端到端测试中的问题至关重要。

现在我们已经为手机应用添加了全文搜索功能，并完成了相关的测试。接下来，让我们继续如何给我们的应用增加排序功能。在后续的步骤中，我们将进一步分享关于AngularJS排序功能的资料。感谢大家对本站的支持！你们的反馈和关注是我们持续更新内容的动力。

我们使用cambrian.render('body')来呈现我们的内容。我们致力于提供高质量、深入的技术文章，帮助开发者在AngularJS的道路上不断进步。请继续关注我们的站点，更多精彩内容即将呈现！