[Angular Tutorial] 6-Two-way Data Binding
在这一步中,您将会添加一个新特性来使得您的用户可以控制电话列表中电话的顺序,动态改变顺序是由创建一个新的数据模型的特性实现的,将它和迭代器绑定在一起,并且让数据绑定神奇地处理下面的工作。
·除了搜索框,应用会展示一个下来菜单来允许用户控制电话列表的顺序。
最大的改变列举如下,当然您可以点击这里查看全部的不同。
组件模板
app/phone-list/phone-list.template.html
:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content--> <p>
Search:
<input ng-model="$ctrl.query">
</p> <p>
Sort by:
<select ng-model="$ctrl.orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</p> </div>
<div class="col-md-10">
<!--Body content--> <ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul> </div>
</div>
</div>
我们在phone-list.template.html模板中做了如下更改:
·首先,我们添加了一个绑定到$ctrl.orderProp的<select>元素,以便我们的用户可以对两种提供的排序方式进行选择。
·随后我们在filter过滤器中加入一个orderBy过滤器来进一步处理进入迭代器的数据。orderBy是一个过滤器,它可以接受一个数组,并且将该数组重新排序并返回。
Angular在选择元素和$ctrl.orderProp数据模型间创建了双向数据绑定,$ctrl.orderProp被用作orderBy过滤器的输入。
正如我们在第5步中讨论的数据绑定和迭代器,无论何时,一旦数据模型改变(比如由于用户通过下拉框改变了排列顺序),Angular的数据绑定可以使视图层自动改变,不需要额外设置臃肿不堪的DOM操作代码。
组件控制器
app/phone-list/phone-list.components.js
:
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: function PhoneListController() {
this.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.',
age: 1
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.',
age: 2
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.',
age: 3
}
]; this.orderProp = 'age';
}
});
·我们更改了phones的数据模型-电话的列表-来为每一部电话增加了一个age属性。这个属性可以通过机龄来对电话进行排序。
·我们在控制器中增加了一行代码来将orderProp的初始值设置为age。如果我们在这里没有设置初始值,orderBy过滤器将会保持未初始化的状态直到我们在下拉框中选中了一个选项。
现在是来谈一谈双向数据绑定的好时候了。注意到当应用被浏览器加载后,"Newest"已经被下拉菜单选择了。这是因为我们已经在控制器中将orderProp设置成了‘age’。所以绑定从我们的数据模型到UI起了效果,现在如果您在下拉框中选择“Alphabetically”,数据模型将被更新,电话记录也会被重新排序,这时候数据绑定从一个相反的方向完成它的工作-从UI到数据模型。
实验
在PhoneListCtrl控制器中,删除设置orderProp取值的那行代码,您将会看到Angular在下拉框的选项中临时增加了一个空白(“未知”)选项,而且电话的顺序是未处理过的(原生排序)。
添加一个phone-list.template.html模板中添加{{$ctrl.orderProp}}绑定来展示其当前值。
通过添加一个-来反转排序<option value="-age">Oldest</option>。
总结
现在您已经在应用中添加了排序,让我们进入下一步来学习Angular Service和Angular如何使用依赖注入(dependency injection)吧!
[Angular Tutorial] 6-Two-way Data Binding的更多相关文章
- angular学习(二)—— Data Binding
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/51182106 Data Binding 在angular中.model和vie ...
- [Angular Directive] Implement Structural Directive Data Binding with Context in Angular
Just like in *ngFor, you're able to pass in data into your own structural directives. This is done b ...
- 完全掌握Android Data Binding
转载:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0603/2992.html 来源 https://github.com/L ...
- angularJS 中的two-way data binding.
原文: https://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angularjs ---------- ...
- 精通 Android Data Binding
转自:https://github.com/LyndonChin/MasteringAndroidDataBinding 官方虽然已经给出了教程 - Data Binding Guide (中文版 - ...
- WPF中的Data Binding调试指南
大家平时做WPF开发,相信用Visual studio的小伙伴比较多.XAML里面曾经在某些特殊版本的Visual Studio中是可以加断点进行调试的,不过目前多数版本都不支持在XAML加断点来调试 ...
- Data Binding使用技巧
Data Binding 根据变量,自动赋值到各widget. How 1.编写layout文件,这里的layout为: act_data_bind_demo.xml 这里需要先准备变量 在具体的wi ...
- Data Binding和INotifyPropertyChanged是如何协调工作的?
前言 WPF的一大基础就是Data Binding.在基于MVVM架构的基础上,只有通过实现INotifyPropertyChanged接口的ViewModel才能够用于Data Binding. 要 ...
- WPF QuickStart系列之数据绑定(Data Binding)
这篇博客将展示WPF DataBinding的内容. 首先看一下WPF Data Binding的概览, Binding Source可以是任意的CLR对象,或者XML文件等,Binding Targ ...
- XAML数据绑定(Data Binding)
XAML数据绑定(Data Binding) Data Binding可以使得XAML标签属性的赋值更为灵活和方便.在绑定过程中,获取数据的标签成为目标标签:提供数据的标签成为源标签.在XAML中 ...
随机推荐
- JQuery选择所有标题的元素
$(":header") 参考:http://www.w3school.com.cn/jquery/selector_header.asp
- $.ajax和$.post的区别(前者根据key-value/后者根据形参)
post不需要给key-value形式: $("#btn").click(function(){ var url=basePath+"/emp/login"; ...
- Spring注解基本解读
在一个类中使用Spring对象,办法如下: 使用注解的形式注入 从ApplicationContext中获取. T t = new ApplicationContext.getBean("x ...
- nodejs实践-代码组织
nodejs实践-代码组织 laiqun@msn.cn Contents 1. 代码组织 1. 代码组织 更新版本 npm install -g n n latest 项目文件组织 MVC 前后端代码 ...
- IE7&IE8不支持rgba的方法
使用滤镜功能 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF0000 ...
- codeforces 369 div2 C dp
http://codeforces.com/contest/711 C. Coloring Trees time limit per test 2 seconds memory limit per t ...
- zf-关于荆州首页鼠标移动到导航栏上去触发的js 显示 问题解决办法
是我copy代码的 时候 这个触发的属性没有修改,导致出现BUG,改成mopen('m2') 就好了
- Hadoop webHDFS设置和使用说明
1.配置 namenode的hdfs-site.xml是必须将dfs.webhdfs.enabled属性设置为true,否则就不能使用webhdfs的LISTSTATUS.LISTFILESTATUS ...
- git第一篇---基本命令
摘要: (1)用git而不是svn.分布式而不是集中式 (2)名词解释 origin是父目录的意思,master是 一个特殊的分支而已.具体参看做最下边: 1.创建仓库 mkdir git cd gi ...
- CodeForces 614D Skills
排序+枚举+二分 最大的那些变成A,小的那部分提高最小值 #include<cstdio> #include<cstring> #include<cmath> #i ...