需求：
1.实现用户数据列表展示5分，实现列表选中行变色5分，实现表格内行与行之间颜色区分5分，实现鼠标移动到删除上时变为小手样式5分。
2.实现姓名查询条件框5分，实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分，实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”5分，当搜索内容有敏感词时，alert提示5分。
3.实现排序下拉列表展示5分，实现按照年龄倒序排序5分，实现按照年龄正序排序5分
4.实现用户添加页5分，按要求实现内容添加5分，实现添加内容时的校验，当年龄不为数字时alert提示用户”年龄格式错误”功能5分，实现添加用户信息到列表中5分。
5.实现列表页面布局整洁5分，实现添加页面布局整洁5分
6. 实现点击删除时弹出二次确认询问框5分，实现删除功能，删除后从列表中消失5分。注：询问框可使用js的confirm实现
代码：
<!DOCTYPE html>
<html ng-app="Alemon">
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{
width: 500px;
}
a{
color: black;
text-decoration: none;
}
table thead{
text-align: center;
background-color: gray;
}
table tbody tr:nth-child(odd){
background-color: ghostwhite;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
angular.module("Alemon",[])
.controller("lemon",function($scope,$filter){
$scope.users=[{
"name":"张三",
"age":45,
"pin":"zhang san",
"zhi":"总经理"
},
{
"name":"李四",
"age":43,
"pin":"li si",
"zhi":"设计师"
},
{
"name":"王五",
"age":40,
"pin":"wang wu",
"zhi":"工程师"
},
{
"name":"赵六",
"age":33,
"pin":"zhao liu",
"zhi":"工程师"
},
{
"name":"周七",
"age":32,
"pin":"zhou qi",
"zhi":"人事经理"
},
]
$scope.newUser=$scope.users;
//删除
$scope.del=function($index){
if(confirm("确定要删除吗？")){
$scope.users.splice($index,1);
}
}
//添加
$scope.add = function () {
$scope.addUserIsShow = true;
};
$scope.sub = function() {
var flag = true;
var flag1 = true;
for (var i in $scope.users) {
if ($scope.users[i].name == $scope.name) {
flag = false;
}
}
if (flag) {
var reg=/^\d+$/;
if (reg.test($scope.age)) {
var newUser = {
name: $scope.name,
age: parseInt($scope.age),
pin: $scope.pin,
zhi: $scope.zhi
}
//添加新用户.
$scope.users.push(newUser);
$scope.name = "";
$scope.age = "";
$scope.pin = "";
$scope.zhi = "";
$scope.addUserIsShow = false;
} else {
alert("年龄格式错误");
}
}
}
//排序
var f=$filter("orderBy");
$scope.paixu=function(){
if($scope.px=="+"){
$scope.users=f($scope.users,"age");
}else if($scope.px=="-"){
$scope.users=f($scope.users,"-age");
}
}
//查询
$scope.select=function(){
var filter=$filter("filter");
if($scope.serach_name==""||$scope.serach_name==null){
alert("请输入内容");
}else{
if($scope.serach_name.match("法")||$scope.serach_name.match("轮")){
alert("输入含有敏感词");
}else{
$scope.users=filter($scope.newUser,{"name":$scope.serach_name});
if($scope.users.length>0){
$scope.isshow=false;
}else{
$scope.isshow=true;
}
}
}
}
})
</script>
</head>
<body ng-controller="lemon">
<center>
<div>
<p>
姓名查询条件<input type="text" ng-model="serach_name" />
<select ng-model="px" ng-change="paixu()" style="margin-left: 30px;">
<option value="">--选择排序方式--</option>
<option value="-">按年龄倒序</option>
<option value="+">按年龄顺序</option>
</select>
</p>
<span ng-show="isshow">查询内容无效</span>
<table border="1px" style="border-collapse: collapse;" ng-hide="isshow">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<th>{{user.name}}</th>
<th>{{user.age}}</th>
<th>{{user.pin}}</th>
<th>{{user.zhi}}</th>
<th ng-click="del($index)"><a href="#">删除</a></th>
</tr>
</tbody>
</table>
<p>
<button ng-click="select()">查询</button>
<button ng-click="add()" style="margin-left: 30px;">添加用户</button>
</p>
</div>
<div ng-show="addUserIsShow">
<form action="">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>姓名：</th>
<td><input ng-model="name" type="text" required /></td>
</tr>
<tr>
<th>年龄：</th>
<td><input ng-model="age" /></td>
</tr><tr>
<th>拼音：</th>
<td><input ng-model="pin" /></td>
</tr><tr>
<th>职位：</th>
<td><input ng-model="zhi" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="保存" /></td>
</tr>
</table>
</form>
</div>
</center>
</body>
</html>
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
