AngularJS入门教程之双向绑定详解


Posted in Javascript onAugust 18, 2016

在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情。

请重置工作目录:

git checkout -f step-4

你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序。

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

模板

app/index.html

Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
 <option value="name">Alphabetical</option>
 <option value="age">Newest</option>
</select>


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

我们在index.html中做了如下更改:

首先,我们增加了一个叫做orderProp的<select>标签,这样我们的用户就可以选择我们提供的两种排序方法。

然后,在filter过滤器后面添加一个orderBy过滤器用其来处理进入迭代器的数据。orderBy过滤器以一个数组作为输入,复制一份副本,然后把副本重排序再输出到迭代器。

AngularJS在select元素和orderProp模型之间创建了一个双向绑定。而后,orderProp会被用作orderBy过滤器的输入。

正如我们在步骤3中讨论数据绑定和迭代器的时候所说的一样,无论什么时候数据模型发生了改变(比如用户在下拉菜单中选了不同的顺序),AngularJS的数据绑定会让视图自动更新。没有任何笨拙的DOM操作!

控制器

app/js/controllers.js:

function PhoneListCtrl($scope) {
 $scope.phones = [
  {"name": "Nexus S",
   "snippet": "Fast just got faster with Nexus S.",
   "age": 0},
  {"name": "Motorola XOOM™ with Wi-Fi",
   "snippet": "The Next, Next Generation tablet.",
   "age": 1},
  {"name": "MOTOROLA XOOM™",
   "snippet": "The Next, Next Generation tablet.",
   "age": 2}
 ];

 $scope.orderProp = 'age';
}

我们修改了phones模型—— 手机的数组 ——为每一个手机记录其增加了一个age属性。我们会根据age属性来对手机进行排序。

我们在控制器代码里加了一行让orderProp的默认值为age。如果我们不设置默认值,这个模型会在我们的用户在下拉菜单选择一个顺序之前一直处于未初始化状态。

现在我们该好好谈谈双向数据绑定了。注意到当应用在浏览器中加载时,“Newest”在下拉菜单中被选中。这是因为我们在控制器中把orderProp设置成了‘age'。所以绑定在从我们模型到用户界面的方向上起作用——即数据从模型到视图的绑定。现在当你在下拉菜单中选择“Alphabetically”,数据模型会被同时更新,并且手机列表数组会被重新排序。这个时候数据绑定从另一个方向产生了作用——即数据从视图到模型的绑定。

测试

我们所做的更改可以通过一个单元测试或者一个端到端测试来验证正确性。我们首先来看看单元测试:

test/unit/controllersSpec.js:

describe('PhoneCat controllers', function() {

 describe('PhoneListCtrl', function(){
  var scope, ctrl;

  beforeEach(function() {
   scope = {},
   ctrl = new PhoneListCtrl(scope);
  });

  it('should create "phones" model with 3 phones', function() {
   expect(scope.phones.length).toBe(3);
  });

  it('should set the default value of orderProp model', function() {
   expect(scope.orderProp).toBe('age');
  });
 });
});

单元测试现在验证了默认值被正确设置。

我们使用Jasmine的接口把PhoneListCtrl控制器提取到一个beforeEach块中,这个块会被所有的父块describe中的所有测试所共享。

运行这些单元测试,跟以前一样,执行./scripts/test.sh脚本,你应该会看到如下输出(注意:要在浏览器打开http://localhost:9876并进入严格模式,测试才会运行!):

Chrome: Runner reset.
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
 Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)

现在我们把注意力转移到端到端测试上来。

test/e2e/scenarios.js:

...
  it('should be possible to control phone order via the drop down select box',
    function() {
   //let's narrow the dataset to make the test assertions shorter
   input('query').enter('tablet');

   expect(repeater('.phones li', 'Phone List').column('phone.name')).
     toEqual(["Motorola XOOM\u2122 with Wi-Fi",
          "MOTOROLA XOOM\u2122"]);

   select('orderProp').option('Alphabetical');

   expect(repeater('.phones li', 'Phone List').column('phone.name')).
     toEqual(["MOTOROLA XOOM\u2122",
          "Motorola XOOM\u2122 with Wi-Fi"]);
  });
...

端到端测试验证了选项框的排序机制是正确的。

你现在可以刷新你的浏览器,然后重新跑一遍端到端测试,或者你可以在AngularJS的服务器上运行一下。

练习

在PhoneListCtrl控制器中,把设置orderProp那条语句删掉,你会看到AngularJS会在下拉菜单中临时添加一个空白的选项,并且排序顺序是默认排序(即未排序)。

在index.html模板里面添加一个`{{orderProp}}绑定来实时显示它的值。

总结

现在你已经为你的应用提供了搜索功能,并且完整的进行了测试。步骤5我们将学习AngularJS的服务以及AngularJS如何使用依赖注入。

以上就是对AngularJS 双向绑定的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 #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
You might like
PHP测试程序运行时间的类
2012/02/05 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python中urllib模块用法实例详解
2014/11/19 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python画图常规设置方式
2020/03/05 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python实现一个优先级队列的方法
2020/07/31 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
签约仪式策划方案
2014/06/02 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
《穷人》教学反思
2016/02/19 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
SQL Server 中的事务介绍
2022/05/20 SQL Server