<!DOCTYPE html>
<html ng-app="myApp4">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css"/>
<title></title>
</head>
<body>
<div class="container">
<h1>四大特性之二：双向数据绑定</h1>
<div ng-controller="myCtrl4">
<hr>
<h2>是否同意注册条款</h2>
<form action="">
<div class="form-group">
<label for="uname">用户名：</label>
<input type="text" class="form-control" id="uname"/>
</div>
<div class="form-group">
<label for="upwd">用户名：</label>
<input type="text" class="form-control" id="upwd"/>
</div>
<div class="checkbox">
<label>
<input ng-model="agree" type="checkbox"/>我同意本站的使用条款{{agree}}
</label>
</div>
<input ng-disabled="!agree" class="btn btn-success" type="button" value="注册"/>
</form>
<h2>选择头像</h2>
请选择：
<select ng-model="headPic">
<option value="">—请选择—</option>
<option value="2.jpg">大漠戈壁</option>
<option value="3.jpg">花团锦簇</option>
<option value="4.jpg">我逗你玩</option>
</select>
<img ng-show="headPic" ng-src="img/{{headPic}}" />
<h2>全选/取消全选</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>工资</th>
<th>生日</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in empList">
<td>
<input ng-checked="selectAll" type="checkbox"/>
</td>
<td>{{e.ename | uppercase}}</td>
<td>{{e.salary | currency : ‘€‘}}</td>
<td>{{e.birthday | date : ‘yyyy-MM-dd HH:mm:ss‘}}</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" ng-model="selectAll">
<span ng-hide="selectAll">全选</span>
<span ng-show="selectAll">取消全选</span>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<script src="js/angular.js"></script>
<script>
angular.module(‘myApp4‘, [‘ng‘])
.controller(‘myCtrl4‘, function ($scope) {
$scope.$watch(‘agree‘, function(){
console.log(‘$scope.agree模型数据改变了：‘+$scope.agree);
})
$scope.$watch(‘headPic‘, function(){
console.log(‘$scope.headPic模型数据改变了：‘+$scope.headPic);
})
$scope.empList = [
{‘ename‘:‘Tom‘, salary:134567, birthday:4413432432457},
{‘ename‘:‘Mary‘, salary:2473242, birthday:2244789237345},
{‘ename‘:‘John‘, salary:734636434, birthday:7623881273894},
{‘ename‘:‘Scott‘, salary:1234567890.123456, birthday:632938744382}
];
})
</script>
</body>
</html>
时间： 2024-10-16 13:14:56