angularJs：双向数据绑定
示例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：双向数据绑定的更多相关文章
- AngularJS双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue、AngularJS 双向数据绑定解剖
数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- 《AngularJS权威教程》中关于指令双向数据绑定的理解
在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...
- AngularJS之双向数据绑定,class绑定
之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...
- angularjs探秘<四> 双向数据绑定
双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...
- angularJs初体验，实现双向数据绑定！使用体会：比较爽
使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...
- 玩转angularJs——通过自定义ng-model，不仅仅只是input可以实现双向数据绑定
体验更优排版请移步原文:http://blog.kwin.wang/programming/angularJs-user-defined-ngmodel.html angularJs双向绑定特性在开发 ...
- 双向数据绑定---AngularJS的基本原理学习
Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS非 ...
随机推荐
- SSH整合所需的jar包
Spring3.1+Hibernate3+Struts2的最新整合所需要的jar包 Spring的基本jar包: 1.org.springframework.web-3.1.4.RELEASE.jar ...
- 【C语言】17-预处理指令3-文件包含
这讲介绍最后一个预处理指令---文件包含 一.基本概念 其实我们早就有接触文件包含这个指令了, 就是#include,它可以将一个文件的全部内容拷贝另一个文件中. 二.一般形式 1.第1种形式#inc ...
- Qt resizeEvent 控件居中设置
在Qt中我们有时需要让一个控件在窗口居中或是在父控件中居中,而且在窗口拉伸时仍然保持正中央的位置.这里介绍一种方法,用到了主窗口的响应函数resizeEvent(QResizeEvent* event ...
- PreparedStatement与Statement的区别
PreparedStatement与statement的区别 1.PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程 2.使用 Statement 对象 ...
- 【iCore2双核心板】SRAM 读写实验（基于Verilog语言）
_____________________________________ 深入交流QQ群: A: 204255896(1000人超级群,可加入) B: 165201798(500人超级群,满员) C ...
- could not build module 'uikit'
今天 新建一个SingleView-APP 无法运行程序,在 AppDelegate.h中 第一行代码处报错. #import <UIKit/UIKit.h> /Users/wjw/Des ...
- PHP 查询时区与设置时区
使用以下语句来查询当前时区设置 date_default_timezone_get() 使用以下语句设置当前时间为北京时间 date_default_timezone_set('PRC');
- mysql 导入导出.sql文件
备份数据库(包含全部表和全部存储过程):C:\Documents and Settings\Administrator>mysqldump -h localhost -u root -p -R ...
- node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...
- Bootstrap学习笔记1
Bootstrap在线手册 http://v3.bootcss.com,这里有详细的说明.参考.示例. Bootstrap为许多前端常用的功能都做了封装.预定义,可以直接使用. Bootstrap支持 ...