第五章 AngularJS 双向绑定.pdf

AngularJS 双向绑定 双向绑定 在这⼀步你会增加⼀个让⽤户控制⼿机列表显⽰顺序的特性。动态排序可以这 实 现，添加⼀个新的模型属性，把它和迭代器集成起来，然后让数据绑定完成剩下的事 情。 请重置⼯作⽬录： git checkout -f step-4 你应该发现除了搜索框之外，你的应⽤多了⼀个下来菜单，它可以允许控制电话排列 的顺序。 步骤3和步骤4之间最重要的不同在下⾯列出。你可以在GitHub⾥看到完整的差别。 模板 app/index.html Search: input ng-model=query Sort by : select ng-model=orderProp option alue=nameAlphabetical/option option alue=ageNewest/option /select ul class=phones li ng-repeat=phone in phones | filter:query | orderBy :ord {{}} p{{phone.snippet}}/p /li /ul 我们在index.html 中做了如下更改： ⾸先，我们增加了⼀个叫做orderProp的select标签，这 我们的⽤户就 可以选择我们提供的两种排序⽅法。 然后，在filter过滤器后⾯添加⼀个orderBy过滤器⽤其来处理进⼊迭代器的 数据。orderBy过滤器以⼀个数组作为输⼊，复制⼀份副本，然后把副本重排 序再输出到迭代器。 AngularJS在select元素和orderProp模型之间创建了⼀个双向绑定。⽽ 后，orderProp会被⽤作orderBy过滤器的输⼊。 正如我们在步骤3 中讨论数据绑定和迭代器的时候所说的⼀ ，⽆论什么时候数据模 型发⽣了改变 （⽐如⽤户在下拉菜单中选了不同的顺序），AngularJS的数据绑定会让 视图⾃动更新。没有任何笨拙的DOM操作 ！ 控制器 app/j s/controllers.j s ： 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.j s