作者：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. CDH：cdh5环境搭建

    安装环境三台centos7 vmw: cdh- 192.168.0.141 [主节点] cdh- 192.168.0.142 [从节点] cdh- 192.168.0.143 [从节点] 1)[各节点 ...

  2. H5使用Swiper过程中遇到的滑动冲突

    一.问题 (1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动,点击左键按着也是拖不动 (2)手机端浏览H5手指不能滑动页面,导致很多页面下面的文字看不到 二.解决问题 1.下面分先说css的问题,主 ...

  3. wzoj install

    wzoj/wiki/安装指南 wzoj-judger/wiki/安装指南 安装LAMP环境 如果你不知道如何安装:DebianUbuntuArchRed Hat 安装redis缓存系统 在 Ubunt ...

  4. docker 打开监听端口

    安装docker的镜像ubuntu,链接:http://www.cnblogs.com/liqiu/p/4162719.html 一.登录ubuntu @~ $ docker run -i -t 9b ...

  5. Zabbix agent 在windows上安装部署

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

  6. ffmpag总结_android_to_ios视频转换

    项目需求: 需要android和ios拍的视频在两个平台上都能播放. ffmpag很早以前就安装好了,忘了是如何装了. 一直无法将android同事的视频转成mp4在ios上播放. 后来发现ffmpa ...

  7. CoffeeScript简介 <一>

    介绍 coffeeScript是一种轻量级的编程语言,可以用编译器生成原生javascript代码.它简化了许多javascript繁琐的方式,可以让你用简单的方式直接使用一行程序代表javascri ...

  8. <script> 的defer和async

    <script src="../file.js" async="async"></script> file.js---- 仅仅只有ale ...

  9. MUI class="mui-switch" 开关 默认为选中

    <label >日期条件: </label> <div id="is_select_time" class="mui-switch mui- ...

  10. javascript promises powered by BlueBird

    什么是promises? 为什么需要promises? 参见: https://promisesaplus.com/ 使用示例: 使用promises之前,代码的编写方式: 使用promises之后: ...