<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/js/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.user=[
{
id:1,
uname:"张三",
pwd:123,
age:20,
gender:"男",
add:false
}, {
id:2,
uname:"李四",
pwd:123,
age:13,
gender:"女",
add:false
},
];
//用户名搜索
$scope.selectUname="";
//性别搜索
$scope.selectGender="";
//年龄查找
$scope.selectAge="";
//全选
$scope.qx=function(){
for(i in $scope.user){
$scope.user[i].check=$scope.quanxuan;
}
}
//批量删除
$scope.deleteUser=function(){
for (var i = 0; i < $scope.user.length; i++) {
if($scope.user[i].check==true){
$scope.user.splice(i,1);
i--;
}
}
}
//删除全部
$scope.deleteAll=function(){
$scope.user=[];
}
//新增用户
$scope.save=function(){
var newid=$scope.add_id;
var newuname=$scope.add_uname;
var newpwd=$scope.add_pwd;
var newage=$scope.add_age;
$scope.errors=[];
if(newid=="" || newid==undefined){
$scope.errors.push("ID不能为空");
}
if(newuname==""||newuname==undefined){
$scope.errors.push("名称不合法");
}
if(newpwd==""||newpwd==undefined){
$scope.errors.push("密码不合法");
}
if(newage.length<=0||newage.length>=100){
$scope.errors.push("年龄不合法");
}
if($scope.errors.length==0){
var s={
id:newid,
uname:$scope.add_uname,
pwd:$scope.add_pwd,
age:$scope.add_age,
gender:$scope.add_gender
}
$scope.user.push(s);
$scope.add_id="";
$scope.add_uname="";
$scope.add_pwd="";
$scope.add_age="";
$scope.add_gender="";
$scope.add=false;
}
}
//年龄查询
$scope.SelectAge=function(age){
if($scope.select=="" || $scope.select==undefined){
return true;
}else{
var arr=$scope.select.split("-");
var min=arr[0];
var max=arr[1];
if(age>min && age<max){
return true;
}else{
return false;
}
}
}
});
</script>
<style>
tbody tr:nth-child(even){
background: pink;
}tbody tr:nth-child(odd){
background: yellow;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input placeholder="用户名搜索" ng-model="selectUname"/>
<select ng-model="select">
<option value="">年龄查找</option>
<option>10-15</option>
</select>
<select ng-model="selectGender">
<option value="">---性别查找---</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="deleteUser()">批量删除</button>
<button ng-click="add=true">新增用户</button>
<button ng-click="deleteAll()">删除全部</button>
<table border="1px" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-click="qx()" ng-model="quanxuan"></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in user | filter:{uname:selectUname,gender:selectGender}" ng-show="SelectAge(u.age)">
<td><input type="checkbox" ng-model="u.check"></td>
<td>{{u.id}}</td>
<td>{{u.uname}}</td>
<td><span ng-hide="update">{{u.pwd}}</span><span ng-show="update"><input type="text" ng-model="u.pwd"><button ng-click="update=false">保存</button></span></td>
<td>{{u.age}}</td>
<td>{{u.gender}}</td>
<td><button ng-click="update=true">修改密码</button></td>
</tr>
</tbody>
</table>
</center>
<div ng-show="add">
<input placeholder="请输入id" ng-model="add_id"/><br>
<input placeholder="请输入用户名" ng-model="add_uname"/><br>
<input placeholder="请输入密码" ng-model="add_pwd"/><br>
<input placeholder="请输入年龄" ng-model="add_age"/><br>
<select ng-model="add_gender">
<option value="">--请选择性别--</option>
<option>男</option>
<option>女</option>
</select>
<!--男<input type="radio" name="gender" checked="checked" ng-model="add_gender">
女<input type="radio" name="gender"><br>-->
<button ng-click="save()">保存</button>
</div>
<p ng-show="errors!=0" ng-repeat="e in errors">{{e}}</p>
</body>
</html>