由于公司加班，刚到家不久，然而却毫无睡意，可能是老了吧～～～

不废话了，没睡意那就做点有意义的事情吧，继续我们的angular学习之路，深夜博文，希望能造福大家！

这次我们来详细讲解angular的双向数据绑定。我会从以下列表依次讲解。

  • 简单的例子
  • 取值表达式与ng-bind的使用
  • 双向绑定的典型场景－表单
  • 动态切换标签样式
  • ng-show和ng-hide

一.简单的例子

这个例子我们在第一节已经展示过了，要看的移步这里

这里实现的效果就是，在输入框输入内容，下面也会相应的改变对应的内容。这就实现了数据双向绑定。

二.取值表达式与ng-bind的使用

我们再看一个例子，点击这里，文中出现的第一个例子中，{{greeting.text}}和{{text}}就是一个取值表达式了，但是如果你一直刷新页面，你会发现这样一个问题，那就是页面有时候会一瞬间的出现“{{greeting.text}} {{text}}”这个字符串，那我们该如何解决呢？

这里就用到ng-bind命令了：用于绑定数据表达式。

比如我们可以把

 <p>{{greeting.text}} {{text}}</p>

改为：

"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";

　　这样改正之后，页面刷新就不会有不希望出现的字符串出现了。

　　但是使用命令总要比直接使用表达式的效率低一点，所以我们总结了一个常用规律：一般来说，index使用ng-bind，后续模版中的使用'{{}}'的形式。

三.双向绑定的典型场景－表单

　　先看一个form.html的内容：

<!doctype html>

<html ng-app="UserInfoModule">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">

    <script src="js/angular-1.3.0.js"></script>

    <script src="Form.js"></script>

</head>

<body>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <div class="panel-title">双向数据绑定</div>

        </div>

        <div class="panel-body">

            <div class="row">

                <div class="col-md-12">

                    <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">

                        <div class="form-group">

                            <label class="col-md-2 control-label">

                                邮箱：

                            </label>

                            <div class="col-md-10">

                                <input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">

                            </div>

                        </div>

                        <div class="form-group">

                            <label class="col-md-2 control-label">

                                密码：

                            </label>

                            <div class="col-md-10">

                                <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">

                            </div>

                        </div>

                        <div class="form-group">

                            <div class="col-md-offset-2 col-md-10">

                                <div class="checkbox">

                                    <label>

                                        <input type="checkbox" ng-model="userInfo.autoLogin">自动登录

                                    </label>

                                </div>

                            </div>

                        </div>

                        <div class="form-group">

                            <div class="col-md-offset-2 col-md-10">

                                <button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>

                                <button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>

                                <button class="btn btn-default" ng-click="resetForm()">重置表单</button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

　　再看Form.js的内容：

 var userInfoModule = angular.module('UserInfoModule', []);

 userInfoModule.controller('UserInfoCtrl', ['$scope',

     function($scope) {

         $scope.userInfo = {

             email: "253445528@qq.com",

             password: "253445528",

             autoLogin: true

         };

         $scope.getFormData = function() {

             console.log($scope.userInfo);

         };

         $scope.setFormData = function() {

             $scope.userInfo = {

                 email: 'testtest@126.com',

                 password: 'testtest',

                 autoLogin: false

             }

         };

         $scope.resetForm = function() {

             $scope.userInfo = {

                 email: "253445528@qq.com",

                 password: "253445528",

                 autoLogin: true

             };

         }

     }

 ])

　　实现效果截图如下：

　　上图实现的功能是：

　　　　1.点击”获取“，可以在控制台输出三个数据，邮箱、密码和选中状态（true、false）

　　　　2.点击“设置”：可以更改两个输入框的值和复选框取消选中的状态；

　　　　3.点击“重置”：可以让数据恢复到初始数据。

　　因为输入框中的ng-model和控制器中的数值实现了双向绑定，所以更改输入框的值或者更改控制器中的值，都会相应的更改双方的值。就这么几行代码，就实现了这么强大的功能，是不是觉得很神奇呢？确实很神奇，不过，更加神奇的还在后面呢！继续吧！

四.动态切换标签样式

先看color.html的内容：

 <!doctype html>

 <html ng-app="MyCSSModule">

 <head>

     <meta charset="utf-8">

     <link rel="stylesheet" href="CSS1.css">

 </head>

 <style type="text/css">

     .text-red {

         background-color: #ff0000;

     }

     .text-green {

         background-color: #00ff00;

     }

 </style>

 <body>

     <div ng-controller="CSSCtrl">

         <p class="text-{{color}}">测试CSS样式</p>

         <button class="btn btn-default" ng-click="setGreen()">绿色</button>

     </div>

 </body>

 <script src="js/angular-1.3.0.js"></script>

 <script src="color.js"></script>

 </html>

　　我们看第19行：有一个“color”的变量存在于这个p标签中，当点击“绿色”时，执行setGreen函数，改变“color”的值为“green”，所以更改了类名，从而也更改了背景颜色。使用这样的方法，让我们不用去直接操作元素，而是加一个变量就行了。代码简洁直观。

　　我们再看一下color.js的内容：

 var myCSSModule = angular.module('MyCSSModule', []);

 myCSSModule.controller('CSSCtrl', ['$scope',

     function($scope) {

         $scope.color = "red";

         $scope.setGreen = function() {

             $scope.color = "green";

         }

     }

 ])

　　属性“color”的默认值为“red”，所以显示红色，点击时执行函数，变为绿色。

　　

　　OK，以上就是对数据双向绑定的详细说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方，尽管问我，我肯定会给大家解答的。祝大家生活愉快！

待续~~~

从0开始学angularjs－笔记04的更多相关文章

  1. 从0开始学angularjs－笔记03

    大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦---不想上班就来继续写我的angualrjs教程,造福大家吧!! 今天的主要讲解部分有以下几点:1.演示一个完整的项目结构  2.$sc ...

  2. 从0开始学angularjs－笔记02

    上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...

  3. 从0开始学angularjs－笔记01

    一.angularjs简介 AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利 ...

  4. 从0开始学Swift笔记整理（五）

    这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Sw ...

  5. 从0开始学Swift笔记整理（四）

    这是跟在上一篇博文后续内容: --重写方法 重写实例方法 在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person {        var n ...

  6. 从0开始学Swift笔记整理（三）

    这是跟在上一篇博文后续内容: --Swift中相关的属性 存储属性 Swift中的属性分为存储属性和计算属性,存储属性就是Objective-C中的数据成员,计算属性不存储数据,但可以通过计算其他属性 ...

  7. 从0开始学Swift笔记整理（二）

    这是跟在上一篇博文后续内容: --函数中参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以引用方 ...

  8. 从0开始学Swift笔记整理（一）

    Swift 是一种适用于 iOS 和 OS X 应用的全新编程语言,它建立在最好的 C 和 Objective-C 语言之上,并且没有 C 语言的兼容性限制.Swift 采用安全的编程模式,增加了现代 ...

  9. JS自学笔记04

    JS自学笔记04 arguments[索引] 实参的值 1.对象 1)创建对象 ①调用系统的构造函数创建对象 var obj=new Object(); //添加属性.对象.名字=值; obj.nam ...

随机推荐

  1. C/C++:提升_头文件的使用

    C/C++:提升_头文件的使用 ◇写在前面 学到现在,很多人编写程序时只会使用一个文件.这样在代码量较小的时候,更利于表达程序,但是随着代码量的逐步增加,程序的思维逻辑不是我们一下子就可以完全理清的, ...

  2. Greenplum 数据库安装部署（生产环境）

    Greenplum 数据库安装部署(生产环境) 硬件配置: 16 台 IBM X3650, 节点配置:CPU 2 * 8core,内存 128GB,硬盘 16 * 900GB,万兆网卡. 万兆交换机. ...

  3. Python - Tips

    01 - input与raw_input的区别 input() #可以直接输入数字,但输入字符的要用引号''或者双引号"" raw_input() #将所有的输入都直接当作一串字符 ...

  4. 漫谈可视化Prefuse（一）---从SQL Server数据库读取数据

    上篇<可视化工具solo show-----Prefuse自带例子GraphView讲解>主要介绍了整个Prefuse工具集具有的一些特征.框架的运行流程,分析并展现了官方提供的例子Gra ...

  5. [java] jsoup使用简介-汇率换算器实现-插曲2

    [java] jsoup使用简介-汇率换算器实现-插曲2 // */ // ]]>   [java] jsoup使用简介-汇率换算器实现-插曲2 Table of Contents 1 系列文章 ...

  6. [SDK2.2]Windows Azure Cloud Service (35) 使用VS2013发布Azure Cloud Service

    <Windows Azure Platform 系列文章目录> 好久没有更新BLOG了,今天我们继续Windows Azure相关的内容. 笔者最近把Visual Studio升级到了20 ...

  7. Halcon与opencv格式的转换

    IplImage* ImageProcess::HImageToIplImage(Hobject &Hobj) { IplImage* pImage; HTuple htChannels; c ...

  8. postgres中的视图和物化视图

    视图和物化视图区别 postgres中的视图和mysql中的视图是一样的,在查询的时候进行扫描子表的操作,而物化视图则是实实在在地将数据存成一张表.说说版本,物化视图是在9.3 之后才有的逻辑. 比较 ...

  9. 基于HT for Web的3D呈现A* Search Algorithm

    最近搞个游戏遇到最短路径的常规游戏问题,正巧看到老同事写的3D机房最短路径巡线文章,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现,算法基于开源 https://github.c ...

  10. Socket.Available 属性

    获取已经从网络接收且可供读取的数据量. 命名空间:   System.Net.Sockets程序集:  System(System.dll 中) 从网络接收的.可供读取的数据的字节数. 异常   Ex ...