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非 ...
随机推荐
- asp.net 页面过程
- 仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）
事实上不太适合做上拉刷新和下拉加载 官方地址 http://idangero.us/swiper demo http://idangero.us/swiper/demos/#.V5YV4_mF4dU ...
- Repair duplicate IDs on cloned Endpoint Protection 12.1 clients
https://support.symantec.com/en_US/article.TECH163349.html
- 5. Configure the Image Service
Controller Node: 1. sudo apt-get install glance python-glanceclient 2. sudo vi /etc/glance/glance- ...
- 【转】个人对JQuery Proxy()函数的理解
原文地址:http://www.cnblogs.com/acles/archive/2012/11/20/2779282.html JQuery.proxy(function,context): 使用 ...
- 用ultraISO 制作一个MSdos启动软盘镜像
见过软盘,但是没用过,在虚拟机里试试. 磁带,软盘,光盘,硬盘…… 储存介质一代代更新,看到的img.iso文件都是叫做镜像文件(image file ).image 即图片照片,所谓的image f ...
- [ZZ] Maxwell 架构
http://digi.163.com/14/0218/23/9LDCTFON00162DSP.html [IT168 评测]随着一句“娘娘,封神啦(宝鸡口音)”,中国的观众迅速认识到了两个极其出彩的 ...
- java build path->source folder分析
1.build path下的source folde,指的是项目存放源码的位置,即存放Java代码的位置!!! 如果将一个文件夹设为java build path里的source folder下,则这 ...
- python 动态加载module、class、function
python作为一种动态解释型语言,在实现各种框架方面具有很大的灵活性. 最近在研究python web框架,发现各种框架中需要显示的定义各种路由和Handler的映射,如果想要实现并维护复杂的web ...
- Raft
http://thesecretlivesofdata.com/raft/ https://github.com/coreos/etcd 1 Introduction Consensus algo ...