从0开始学angularjs

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

不废话了，没睡意那就做点有意义的事情吧，继续我们的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的更多相关文章

从0开始学angularjs－笔记03
大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦---不想上班就来继续写我的angualrjs教程,造福大家吧!! 今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$sc ...
从0开始学angularjs－笔记02
上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...
从0开始学angularjs－笔记01
一.angularjs简介 AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利 ...
从0开始学Swift笔记整理（五）
这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Sw ...
从0开始学Swift笔记整理（四）
这是跟在上一篇博文后续内容: --重写方法重写实例方法在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person { var n ...
从0开始学Swift笔记整理（三）
这是跟在上一篇博文后续内容: --Swift中相关的属性存储属性 Swift中的属性分为存储属性和计算属性,存储属性就是Objective-C中的数据成员,计算属性不存储数据,但可以通过计算其他属性 ...
从0开始学Swift笔记整理（二）
这是跟在上一篇博文后续内容: --函数中参数的传递引用类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以引用方 ...
从0开始学Swift笔记整理（一）
Swift 是一种适用于 iOS 和 OS X 应用的全新编程语言,它建立在最好的 C 和 Objective-C 语言之上,并且没有 C 语言的兼容性限制.Swift 采用安全的编程模式,增加了现代 ...
JS自学笔记04
JS自学笔记04 arguments[索引] 实参的值 1.对象 1)创建对象 ①调用系统的构造函数创建对象 var obj=new Object(); //添加属性.对象.名字=值; obj.nam ...

随机推荐

Session监听器
Session监听器,是用来监听session对象创建和关闭的.有时我们需要在session创建或关闭时执行一些操作.这是就可以使用Session Listenner. .在项目的web.xml文件中 ...
Azure Redis Cache (1) 入门
<Windows Azure Platform 系列文章目录> Microsoft Azure Redis Cache基于流行的开源Redis Cache. 1.功能 Redis 是一种高 ...
【Android】你应该知道的调试神器----adb
最近跟着一个前辈在做TV应用,因为不能通过usb连接调试,接触到了adb,突然间觉得自己似乎发现了另外一个世界,借助adb shell命令对应用进行调试,简直方便得不行.更重要的是,这是命令行操作啊! ...
解决：HTML中多文本域(textarea)回车后数据存入数据库，EL表达式取出异常。
问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...
Emit学习(2) - IL - 对象的创建过程
上一篇的介绍中, 并没有介绍到对象的创建过程, 这一篇主要就介绍一下, 对象的创建过程. 其实熟悉了IL语法之后, 完全可以用Reflector反编译代码去查看. 而且正因为有这个工具, 可以对照着R ...
C#常用字符串加解密方法封装
C#中常用的字符串加密.解密方法封装,包含只加密但不解密的方法.收藏起来备用. //方法一 //须添加对System.Web的引用 //using System.Web.Security; /// & ...
关于ExtJs4的Grid带查询参数分页（baseParams-->extraParams）
(园里很多文章,美名其曰 :ExtJs GridPanel+查询条件+分页. 但是加查询条件后点击下一页,查询条件失效,求你们自己测试明白再显摆不要误导我这种新人.) ExtJs6发布了,ExtJ ...
HTTP & HTTPs
HTTP HTTP 消息 HTTP 方法参考 [1]. HTTP 协议初识 - 阮一峰: HTTPS 参考 [1]. HTTPS 升级指南 - 阮一峰:
第三讲：WCF介绍（3）
代码 https://yunpan.cn/cPns5DkGnRGNs 密码:3913 前面我们通过一个小的例子,大概了解的WCF. 这里我们补充下 EndPoint 配置 A,B,C 中 ...
hibernate----1-N--jointable（人与地址）
package com.ij34.dao; import java.util.HashMap; import java.util.HashSet; import java.util.Set; impo ...

从0开始学angularjs－笔记04

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

随机推荐

热门专题