<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1 引入angular包 shift+ctrl+/-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("ytyapp", []);
app.controller("demo1", function($scope) {
$scope.datas = [{
name: '杨戬',
sex: '男',
birth: new Date('1995-04-24'),
addres: '北京-海淀区'
}, {
name: '二郎神',
sex: '男',
birth: new Date('1995-05-24'),
addres: '北京-怀柔区'
}, {
name: '哪吒',
sex: '女',
birth: new Date('1995-04-24'),
addres: '北京-大兴区'
}];
$scope.del = function(i) {
var b = confirm("是否删除!");
if (b) {
$scope.datas.splice(i, 1);
}
}
$scope.save = function() {
var v_name = $scope.uname;
var sex = $scope.sex;
var birth = $scope.birth;
var address = $scope.pro + "-" + $scope.city;
$scope.errors = [];
if (v_name == undefined || v_name.length < 3 || v_name.length > 30) {
$scope.errors.push("用户名不合法");
}
if (sex == undefined) {
$scope.errors.push("性别不能为空");
}
if ($scope.errors.length == 0) {
$scope.datas.push({
name: v_name,
sex: sex,
birth: birth,
addres: address
});
} else {
}
}
$scope.qx = function() {
var f = $scope.ld;
for (var i in $scope.datas) {
$scope.datas[i].ck = f;
}
}
$scope.delAll = function() {
for (var i = 0; i < $scope.datas.length; i++) {
if ($scope.datas[i].ck) {
$scope.datas.splice(i, 1);
i--;
}
}
}
})
</script>
<style>
ul li{
background-color: chocolate;
}
</style>
</head>
<body ng-app="ytyapp" ng-controller="demo1">
{{datas}}
<form>
姓名:<input ng-model="uname" /> 性别:
<select ng-model="sex">
<option>男</option>
<option>女</option>
</select> 生日:
<input type="date" ng-model="birth" /> 住址:
<input ng-model="pro" /> <input ng-model="city" />
<button ng-click="save()">添加</button>
<button ng-click="delAll()">批量删除</button>
</form>
<div>
<ul>
<li ng-repeat="e in errors">{{e}}</li>
</ul>
</div>
<table >
<tr>
<td><input type="checkbox" ng-model="ld" ng-click="qx()" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat="n in datas">
<td><input type="checkbox" ng-model="n.ck" /></td>
<td>{{n.name}}</td>
<td>{{n.sex}}</td>
<td>{{n.birth}}</td>
<td>{{n.addres}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</table>
</body>
</html>