示例1

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS的特性之：双向绑定</title>
<!--引入官方标准的angular. min.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body >
< !--这里没有引用任何js，可以实现输入框中的数据改变，其他绑定过的地方的数据也随之改变。
如果在原始的js或jquery中，都是需要写一个方法去监听内容而修改的。这里的事件由angularjs封装过的
-->
<input ng-model="hello.text"/>
<p>{{hello.text}}</p>
</body>
</html>

示例2

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<!-- CSS框架-->
<!-- angular必备js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<!--新Bootstrap核心CSS文件-->
<link href= "http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--可选的Bootstrap主题文件（一般不使用） -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js之前引入-->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<! --最新的Bootstrap核心JavaScript文件-->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
< script src="js/form/form.js"></script>
</head>
<body>
<hr/>

<div class="panel panel-primary"><!-- default:没有蓝色线框primary：有蓝色线框-->
<div class="panel-heading">
<div class="panel-title "><!-- class="panel-title"会让字体变粗-->
双向数据绑定
</div>
</div>

<div class="panel-body"><!-- panel-body :下面会变高。就是一个容器了。如果没有，只有字体的高度了-->
<div class="row"><!--有row：会从最左侧开始，没有row会左侧空出一段距离-->
<div class=" col-md-12 "><!--左浮动：左侧空出多少距离，与不加row的时候差不多，都是左侧空出一段距离-->
<div class="form-horizo​​​​​​ ​​​​ ​​​​ ​​​​ ​​​​ ​​​​ ​​​​ ntal" role ="form" ng-controller="UserInfoCtrl">
<div class="form-group" >
< label class =" col- md- 2" control- label>
</ label>
<div class= "col -md- 10">
<input 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">
<input type="checkbox" ng-model="userInfo.autoLogin">自动登陆
< /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= "restForm () ">重置form表单的值</ button>
</div >
</div>
</div>
</div>
</div>
</div>
</ div>
</ html>

form.js

var myApp=angular.module("myApp", []);
myApp.controller("UserInfoCtrl",['$scope',function HelloController($scope){
//定义对象
$scope.userInfo={
email:"1564165 @qq.com",
password:"password",
autoLogin:true
};
//获取表单值
$scope.getFormData=function(){
alert($scope.userInfo.email)
alert($scope.userInfo.password)
alert ($scope.userInfo.autoLogin)

};
//设置表单值
$scope.setFormData=function(){
$scope.userInfo={
email:"22222222@qq.com",
password:"2222222222",
autoLogin:false
}
}
//重置表单值
$scope.restForm=function(){
$scope.userInfo={
email:"1564165@qq.com",
password:"password",
autoLogin:true
};
}

}]);

项目结构：

访问路径：http://localhost:8080/test/testFormCtrl2.html

示例3：双向数据绑定实现样式改变

弊端：这样会出现html中p class="text-{{null}}的情况，所以升级为示例4

根目录的html文件testCss1.html

<!DOCTYPE html> 

<html ng-app="cssApp"> 

<head> 

<meta charset="UTF-8" /> 

<title>双向数据绑定实现样式的改变</title> 

<script src="https ://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 

<script src="js/css/css1.js"></script> 

<link rel="stylesheet" href="css/css1.css"> 

</head> 

<body >

<div ng-controller="css1Ctrol"> 

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

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

</div> 

</body>

</html>

Css1.css文件

.text-red{ 

background-color:#ff0000; 

}

.text-green{ 

background-color:#00ff00; 

}

css1.js文件

var app=angular.module('cssApp',[]); 

app.controller('css1Ctrol',['$scope',function($scope){ 

$scope.color="red"; 

$scope.setGreen=function (){ 

$scope.color="green"; 

} 

} 

]);

目录结构：

访问路径：http://localhost:8080/test/testCss1.html

angularJs：双向数据绑定的更多相关文章

  1. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue、AngularJS 双向数据绑定解剖

    数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...

  3. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  4. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  5. AngularJS之双向数据绑定,class绑定

    之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...

  6. angularjs探秘<四> 双向数据绑定

    双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...

  7. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  8. 玩转angularJs——通过自定义ng-model，不仅仅只是input可以实现双向数据绑定

    体验更优排版请移步原文:http://blog.kwin.wang/programming/angularJs-user-defined-ngmodel.html angularJs双向绑定特性在开发 ...

  9. 双向数据绑定---AngularJS的基本原理学习

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS非 ...

随机推荐

  1. u盘文件系统故障的修复方法

    比如U盘挂载的文件系统是/dev/sda1,且文件系统有故障(FAT: Filesystem error) 修复U盘文件系统故障 sudo dosfsck -v -a /dev/sda1

  2. JS实现上下左右四方向无间隙滚动

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出< marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路: ...

  3. PHP为什么会被认为是草根语言？

    PHPer是草根吗? 从PHP诞生之日起,PHP就开始在Web应用方面为广大的程序员服务.同时,作为针对Web开发量身定制的脚本语言,PHP一直秉承简单.开源的 思想,这也使得PHP得以快速的发展,并 ...

  4. 【C语言】07-基本语句和运算

    一.基本语句 C语言的基本语句跟Java中的差不多,所以,这里只是简单地提一下 循环语句(do while.while.for) 条件语句(if .if-else.switch) goto语句 二.基 ...

  5. 初识python面向对象

    一.初识python面向对象: class Person: #使用class关键字定义一个类 age=0 #类变量(静态变量) def eat(self,food): #定义一个方法 self.age ...

  6. 浅试 JNI编程

    好吧,开始我的第一个JNI试验小程序 HelloWorld.java 代码清单 public class HelloWorld { static { System.loadLibrary(" ...

  7. php如何判断远程文件是否存在

    <?php /*   函数:remote_file_exists   功能:判断远程文件是否存在   参数: $url_file -远程文件URL   返回:存在返回true,不存在或者其他原因 ...

  8. could not build module 'uikit'

    今天 新建一个SingleView-APP 无法运行程序,在 AppDelegate.h中 第一行代码处报错. #import <UIKit/UIKit.h> /Users/wjw/Des ...

  9. IP_TOS选项

    voip IP_tos 选项 在IP头中,有一Type-of-Service字段,该字段描述了IP包的优先级和QoS选项,使用IP_TOS可以来设定该字段的值,以区分不同服务的优先级,Linux 中可 ...

  10. Nvidia VertexTextureFetch Water

    http://http.download.nvidia.com/developer/SDK/Individual_Samples/samples.html http://http.download.n ...