作者：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. centos安装memcached和PHP php-pecl-memcached.x86_64

    安装memcached sudo yum install memcached.x86_64 安装php-pecl-memcached php memcache有两个实现类 php-pecl-memca ...

  2. How to chain a command after sudo su?

    The idea is simple, for example: alias foo='sudo su foo && cd /tmp' However, it does not exe ...

  3. vue Object.defineProperty Proxy 数据双向绑定

    Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...

  4. Zabbix agent 在windows上安装部署

    Zabbix agent 在windows上安装部署 1.下载与解压 地址: http://www.zabbix.com/downloads/2.4.4/zabbix_agents_2.4.4.win ...

  5. SSL证书问题汇总

     //SLL协议分析 注意:对SSL协议的功能 https://www.myssl.cn/tools/check-server-cert.html //SSL证书格式转换 https://www.it ...

  6. .NET 同步与异步之锁（ReaderWriterLockSlim）（八）

    本随笔续接:.NET 同步与异步之锁(Lock.Monitor)(七) 由于锁 ( lock 和 Monitor ) 是线程独占式访问的,所以其对性能的影响还是蛮大的,那有没有一种方式可是实现:允许多 ...

  7. Hyper-V 怎样拷贝文件至虚拟硬盘并附加到虚拟机上

    对于大文件来说,通过远程桌面拷贝是件麻烦的事情,虽然简单,但速度受限太多,不推荐使用. 我工作中对于大文件的拷贝,通过创建一个新的虚拟硬盘(VHD),再把大文件拷贝至虚拟硬盘中,最后附加到虚拟机上. ...

  8. mariadb(MySql)设置远程访问权限

    [问题]mariadb(MySql)安装之后,本地连接mysql是可以的,但是远程的机器不能连接和访问. [解决]修改mysql远程连接的ip限制配置. [步骤]1.本地mysql客户端连接mysql ...

  9. Django-启动文件的制作

    在Django项目下的app.py中写入这几行代码,当启动的时候会找项目下名为:stark.py的文件并先加载 #app.py from django.apps import AppConfig cl ...

  10. Spring Boot 2.0 整合Thymeleaf 模板引擎

    本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...