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 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
react国际化react-intl的使用
May 06 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网站提速三大“软”招
2006/10/09 PHP
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
vue实现信息管理系统
2020/05/30 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
python中黄金分割法实现方法
2015/05/06 Python
Python 类的继承实例详解
2017/03/25 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Django的CVB实例详解
2020/02/10 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
毕业生个人求职信范文分享
2014/01/05 职场文书
国税会议欢迎词
2014/01/16 职场文书
二年级学生评语大全
2014/04/23 职场文书
活动总结报告范文
2014/05/04 职场文书
安全责任书模板
2014/07/22 职场文书
销售代理协议书
2014/09/30 职场文书
九年级化学教学反思
2016/02/22 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Django rest framework如何自定义用户表
2021/06/09 Python
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android