作者：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. Notes中几个处理多值域的通用函数

    1.查找出查找内容在多值域中的索引值 getItemIndex(域名,域值,文档) Public Function getItemIndex(ByVal fieldName As String, By ...

  2. CentOS 7.4安装Nginx 1.14.0

    一.安装所需环境   1.gcc 安装         yum install gcc-c++    

  3. 【java】求两个字符串的最长公共子串

    这个是华为OJ上的一道题目.首先,如果我们用java写代码,华为OJ有以下三条规则需遵守,否则编译无法通过或者用例无法通过,规则如下: (1)一定不可以有包名: (2)主类名只能为Main: (3)不 ...

  4. 【LeetCode-面试算法经典-Java实现】【062-Unique Paths（唯一路径）】

    [062-Unique Paths(唯一路径)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 A robot is located at the top-left c ...

  5. MDK-ARM输出HEX文件重命名设置

    输出的可执行文件和库的名称就是在这里定义.比如我们常见输出Hex文件,其名称就是这里定义的.

  6. 【转】Extjs2.2.1 DateField 变形的问题解决方案

    <script> //Extjs2.2.1 DateField 变形的问题 // IE Ext.isIE9 = Ext.isIE && navigator.userAgen ...

  7. Fluent动网格【1】：概述

    最近总有小伙伴向我询问Fluent中的动网格问题,因此决定做一期关于Fluent动网格技术的内容. 动网格技术在流体仿真中很特殊,应用也很广.生活中能够碰到形形色色的包含有部件运动的问题,比如说我现在 ...

  8. 项目在iOS11上遇到的小问题

    ​iOS11正式版出了这么久了,在忙完新版本开发,写下在iOS11上的一些小问题. 1  App图标不显示 现象:升级到iOS11系统下自己的项目桌面app图标不见了 出现这种情况我还以为自己手动删除 ...

  9. ①Android NuPlayer播放框架

    [时间:2016-09] [状态:Open] [关键词:android,nuplayer,开源播放器,播放框架,nuplayerdriver] 0 NuPlayer简介 Android2.3时引入流媒 ...

  10. 解决Redis之MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist o...

    解决Redis之MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist o... ...