示例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
扫一扫
2240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
