例一、简单双向绑定
花括号方式：{{greeting.text}} <br/>
ng-bind方式：<span ng-bind="greeting.text"></span>
注意：如果网络过慢，{{}}会显示出来，可以使用ng-bind，没刷新出来之前进行隐藏。
例二、基于表单的数据绑定
<html>
<head>
<base href="/"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://www.orchome.com/css/bootstrap/3.0.3/bootstrap.min.css"/>
<script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
<title>Document</title>
</head>
<body ng-app="app">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">双向数据绑定</div>
</div>
<div class="panel-body">
<div class="low">
<div class="col-md-12">
<form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
<div class="form-group">
<label class="col-md-2 control-label">邮箱:</label>
<div class="col-md-10">
<input type="email" class="form-control" placeholder="输入你的邮箱" 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" ng-model="userInfo.password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="userInfo.autoLogin"> Remember me</label>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>
<button type="submit" class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>
<button type="submit" class="btn btn-default" ng-click="resetFormData()">恢复Form表单的值</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
var app = angular.module("app", []);
app.controller("UserInfoCtrl", function ($scope) {
$scope.userInfo = {
email: 'admin@orchome.com',
password: '000000',
autoLogin: true
};
$scope.getFormData = function () {
alert($scope.userInfo.email);
};
$scope.setFormData = function () {
$scope.userInfo = {
email: 'orc@orchome.com',
password: '000000',
autoLogin: false
};
};
$scope.resetFormData = function () {
$scope.userInfo = {
email: 'admin@orchome.com',
password: '000000',
autoLogin: true
};
};
});
</script>
</html>
例三、css样式数据绑定
<html>
<head>
<base href="/"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://www.orchome.com/css/bootstrap/3.0.3/bootstrap.min.css"/>
<script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
<title>Document</title>
</head>
<body ng-app="app">
<div ng-controller="CSSCtrl">
<p class="text-{{color}}">测试css模板</p>
<button class="btn btn-default" ng-click="setGreen()">绿色</button>
</div>
</body>
<style>
.text-red {
background-color: #ff0000;
}
.text-green {
background-color: #00ff00;
}
</style>
<script>
var app = angular.module("app", []);
app.controller("CSSCtrl", function ($scope) {
$scope.color = "red";
$scope.setGreen = function () {
$scope.color = "green"
};
});
</script>
</html>
