作者：arccosxy  转载请注明出处：http://www.cnblogs.com/arccosxy/

上一节，我们在JS中声明一个scope变量然后在HTML直接访问它，这非常的酷。但是AngularJS能够提供更多神奇好玩的东西。数据绑定（data binding）就是其中一个很重要的主题，接下来我会介绍数据绑定最重要的部分，学习完你将理解它的用途。

为了理解它的概念，声明一个scope变量作为model（先不用管model，以后再说）。修改maincontroller.js如下：

app.controller("MainController", function($scope){

    $scope.inputValue = "";

});

在我们的页面中增加一些HTML代码：

<!DOCTYPE html>

<head>

    <title>Learning AngularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

    <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

            <input type='text' ng-model="inputValue">

            {{inputValue}}

    </div>

</body>

</html>

在以上代码中我们增加一个简单的文本输入框，并使用ng-model将它绑定scope变量inputValue。注意我们在ng-*标签中没有用{{}}包裹inputValue。此外我们将scope变量inputValue输出到页面上。

以上的所做的这些使我们绑定了输入的值到scope变量。这意味着无论何时输入值发生了变化，绑定的scope变量将同时被更新。在浏览器中打开我们的页面，在输入框中随意输入一些东西，你将会看到类似下面的情况：

当你输入值得时候，scope变量实时地更新，这一点可以直观地在屏幕上看到，相当神奇！现在你已经学会了将变化的元素和值在同一个页面上同步的方法了。下面我们将转到一个更复杂一点的例子上，以便你更好地理解到底数据绑定能做什么。更新maincontroller.js如下：

app.controller("MainController", function($scope){

    $scope.selectedPerson = 0;

    $scope.selectedGenre = null;

    $scope.people = [

        {

            id: 0,

            name: 'Leon',

            music: [

                'Rock',

                'Metal',

                'Dubstep',

                'Electro'

            ]

        },

        {

            id: 1,

            name: 'Chris',

            music: [

                'Indie',

                'Drumstep',

                'Dubstep',

                'Electro'

            ]

        },

        {

            id: 2,

            name: 'Harry',

            music: [

                'Rock',

                'Metal',

                'Thrash Metal',

                'Heavy Metal'

            ]

        },

        {

            id: 3,

            name: 'Allyce',

            music: [

                'Pop',

                'RnB',

                'Hip Hop'

            ]

        }

    ];

});

我们声明了三个scope变量，selectedPerson用来记录被选中的人员对象。selectedGenre用来记录音乐的流派。最后我们用了一个对象数组记录人们的音乐品味。我们将实现两个下拉选择框。一个选择人员，另外一个由于绑定会自动的更新来供你选择这个人的音乐流派。在页面中增加HTML元素如下：

<!DOCTYPE html>

<head>

    <title>Learning AngularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

    <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

        <select ng-model='selectedPerson' ng-options='obj.name for obj in people'></select>

        <select ng-model='selectedGenre'>

            <option ng-repeat='label in people[selectedPerson.id].music'>{{label}}</option>

        </select>

    </div>

</body>

</html>

这里有一些新的东西。首先，我们加入了一个用ng-options标签的选择输入框，这允许我们可以用people scope变量的值来填充这个选择输入框，这里使用person对象的name属性作为选择输入框的标签。

第二个选择输入框以一种不同的方式填充。“ng-repeat”在我看来是AngularJS中一个强大的特性。ng-repeat允许你基于数组或者对象集合重复HTML元素。在上面的HTML中，ng-repeat将基于selectedPersons ID值为people中的每个音乐流派创建一个选项，selectedPersons ID值是由第一个选择输入框的选择决定的。

注意：ng-repeat可以用于任何的HTML元素，可以自己试一下。

在option标签里的{{label}}用来输出ng-repeat选项里声明的label。打开浏览器试一试吧。效果如下：

AngularJS基础02 神奇的数据绑定（Binding）的更多相关文章

  1. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  2. javascript基础02

    javascript基础02 1.数据类型 数据类型的描述在上篇的扩展中有写到链接 由于ECMAScript数据类型具有动态性,因此的确没有再定义其他数据类型的必要.这句话很重要. 如果以后再数据类型 ...

  3. javaSE基础02

    javaSE基础02 一.javac命令和java命令做什么事情? javac:负责编译,当执行javac时,会启动java的编译程序,对指定扩展名的.java文件进行编译,生成了jvm可以识别的字节 ...

  4. java基础学习05(面向对象基础02)

    面向对象基础02 实现的目标 1.String类的使用2.掌握this关键字的使用3.掌握static关键字的使用4.了解内部类 String类 实例化String对象一个字符串就是一个String类 ...

  5. WPF数据绑定Binding(二)

    WPF数据绑定Binding(二) 1.UI控件直接的数据绑定 UI对象间的绑定,也是最基本的形式,通常是将源对象Source的某个属性值绑定 (拷贝) 到目标对象Destination的某个属性上. ...

  6. 085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用

    085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用 本文知识点:构造方法调用 说明:因为时间紧张,本人写博客过程中只是 ...

  7. 084 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 03 构造方法-this关键字

    084 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 03 构造方法-this关键字 本文知识点:构造方法-this关键字 说明:因为时间紧 ...

  8. 083 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 02 构造方法-带参构造方法

    083 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 02 构造方法-带参构造方法 本文知识点:构造方法-带参构造方法 说明:因为时间紧张, ...

  9. 082 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 01 构造方法-无参构造方法

    082 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 01 构造方法-无参构造方法 本文知识点:构造方法-无参构造方法 说明:因为时间紧张, ...

随机推荐

  1. 端口转发工具rinetd的安装与配置

    端口映射和转发在实际应用中非常常见,比如一个局域网只有一台服务器可以被互联网访问到,那么如果想通过互联网访问局域网中其他的服务,最常用的方式就是在这一台机器上开放端口,然后转发至局域网中其他主机的端口 ...

  2. 使用Let’s Encrypt生成免费的SSL证书

    SSL(安全套接层,Secure Sockets Layer),及其继任者 TLS (传输层安全,Transport Layer Security)是为网络通信提供安全及数据完整性的一种安全协议.TL ...

  3. 2D游戏新手引导点光源和类迷雾实现

    一.新手引导须要的遮罩效果 一般做新手引导的时候,会把游戏画面变的半黑,然后须要玩家点击的地方就亮起来.经常使用的做法是採用遮罩来实现,可是仅仅能实现方形的,不能不规则图形.以及是全然挖空.做不到渐变 ...

  4. PostgreSQL之时间戳自动更新

    操作系统 :CentOS7.3.1611_x64 PostgreSQL版本 :9.6 问题描述 PostgreSQL执行Insert语句时,自动填入时间的功能可以在创建表时实现,但更新表时时间戳不会自 ...

  5. B+树索引和哈希索引的区别[转]

    导读 在MySQL里常用的索引数据结构有B+树索引和哈希索引两种,我们来看下这两种索引数据结构的区别及其不同的应用建议. 二者区别 备注:先说下,在MySQL文档里,实际上是把B+树索引写成了BTRE ...

  6. 设置log rotation避免tomcat catalina.out文件增长过大

    创建logrotate配置文件 $ vi /etc/logrotate.d/tomcat 添加以下内容: /opt/tomcat/logs/catalina.out { copytruncate da ...

  7. openssl - 数字证书的编程解析

    原文链接: http://www.cangfengzhe.com/wangluoanquan/37.html 这篇文章主要介绍PKI公钥体系中非常核心元素——数字证书的编程解析.在SSL,SET等安全 ...

  8. unity, ComputeScreenPos 作用

    这帖子讲得很清楚:https://forum.unity3d.com/threads/what-does-the-function-computescreenpos-in-unitycg-cginc- ...

  9. [k8s]通过openssl生成证书

    证书认证原理: http://www.cnblogs.com/iiiiher/p/7873737.html [root@m1 ssl]# cat master_ssl.cnf [req] req_ex ...

  10. pandas DataFrame.shift()函数

    pandas DataFrame.shift()函数可以把数据移动指定的位数 period参数指定移动的步幅,可以为正为负.axis指定移动的轴,1为行,0为列. eg: 有这样一个DataFrame ...