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非 ...
随机推荐
- 【NOIP2003】传染病控制（-贪心/dfs）
我自己yy了个贪心算法,在某oj 0msAC~.然后去wikioi提交,呵呵,原来是之前oj的数据太弱给我水过了,我晕. 我之前的想法是在这棵树上维护sum,然后按时间来割边,每一时刻割已经感染的人所 ...
- UVA 10325 - The Lottery(容斥)
以前做过的一个题,忘记/gcd了,看来需要把以前的东西看一下啊. #include <cstdio> #include <cstring> #include <iostr ...
- POJ 3034 Whac-a-Mole(DP)
题目链接 理解了题意之后,这个题感觉状态转移还是挺好想的,实现起来确实有点繁琐,代码能力还有待加强,经过很长时间才发现bug.注意坐标可能是负的. #include <cstdio> #i ...
- 彻底卸载oracle数据库
有时候因为各种各样的原因,我们不得不重装Oracle,但按照一般的操作,很多朋友用了oracle的删除,然后,你会发现重新安装时,点了下一步安装界面就消失了.事实证明,万能的重启也是解决不了问题的.往 ...
- 利用Oracle的row_number() over函数消除重复的记录
.select d.id,d.outer_code from dict_depts_source d order by outer_code(查看重复数据) .select d.id,d.outer_ ...
- [转帖] Symbol Emotions Sticker 英文符号表情大全
:-) smile :-] polite smile :-( frown :-[ another frown :-/ or :-\ skepticism, annoyance, or a slight ...
- salt-master 的配置文件详解
绑定的地址: interface: 0.0.0.0 master和minion通信端口: publish_port: 4505 可以使用的文件描述符:(每个minion连接master至少需要一个文件 ...
- 通过Powershell开启RDP
1) Enable Remote Desktop set-ItemProperty -Path 'HKLM:\System\CurrentControlSet\Control\Terminal Ser ...
- 分布式架构高可用架构篇_05_fastdfs集群的安装
参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...
- gridview header增加排序图标
/* add sorting icons to gridview sort links */a.asc:after, a.desc:after { position: relative; top: 1 ...