<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>月考模拟</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
body {
background: url(img/a.bmp.jpg) no-repeat;
background-repeat-x: 100%
}
li {
float: left;
list-style: none;
margin-left: 170px;
position: relative;
}
#title {
background-color: chocolate;
}
#tab tr:nth-child(odd) {
background-color: #A2A2A2;
}
#tab tr:nth-child(even) {
background-color: #DDDDDD;
}
#tab tr:hover {
background-color: #D589D9;
}
a {
text-decoration: none;
color: black;
cursor: pointer;
}
#da td:hover {
cursor: nesw-resize;
}
#btn1 {
width: 100px;
height: 30px;
background-color: #E5E5E5;
cursor: pointer;
border-radius: 7px;
position: relative;
top: 20px;
left: 50px;
}
#btn2 {
width: 100px;
height: 30px;
background-color: #E5E5E5;
cursor: pointer;
border-radius: 7px;
position: relative;
top: 20px;
left: 450px;
}
fieldset {
width: 800px;
position: relative;
top: 30px;
left: -10px;
}
legend {
color: chocolate;
}
#tab2 th {
color: darkseagreen;
}
</style>
</head>
<body ng-app="mapp" ng-controller="mctrl">
<ul>
<li style="color:#33CD5F"><b>姓名查询条件</b><input type="text" style="background-color: #B2B2B2;" ng-model="see_name" /></li>
<li>
<select style="width:175px;" ng-model="zd" ng-change="chagechecked()">
<option>按照年龄倒序排列</option>
<option>按照年龄顺序排列</option>
</select>
</li>
</ul>
<br />
<br />
<b style="float: left;position: relative;bottom: 20px;color:lime;">用户列表</b>
<table id="tab" border="1px" cellspacing="0px" cellpadding="0px" width="800px" style="position: relative;left: -70px;">
<tr id="title" align="center">
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<tr ng-repeat="da in datas " align="center" id="da">
<td>{{da.name}}</td>
<td>{{da.age}}</td>
<td>{{da.pinyin}}</td>
<td>{{da.zhiwei}}</td>
<td>
<a href="#" ng-click="dele($index)">删除</a>
</td>
</tr>
</table>
<input type="button" id="btn1" value="查询" ng-click="op()" />
<input type="button" id="btn2" value="添加用户" ng-click="ishide()" />
<fieldset ng-show="flag">
<legend>添加用户信息</legend>
<table id="tab2">
<tr>
<th>请输入姓名</th>
<td><input type="text" ng-model="n_name" /></td>
</tr>
<tr>
<th>请输入年龄</th>
<td><input type="text" ng-model="n_age" /></td>
</tr>
<tr>
<th>请输入拼音</th>
<td><input type="text" ng-model="n_pinyin" /></td>
</tr>
<tr>
<th>请输入职位</th>
<td><input type="text" ng-model="n_zhiwei" /></td>
</tr>
</table>
<input type="button" value="保存" width="200px" style="position: relative; left: 100px;top: 10px;bottom: 20px;" ng-click="insert()" />
</fieldset>
</body>
<script>
var mode = angular.module("mapp", []);
mode.controller("mctrl", function($scope) {
var dd = [{
"name": "张三",
"age": 22,
"pinyin": "zhang_san",
"zhiwei": "总经理"
}, {
"name": "李四",
"age": 16,
"pinyin": "li_si",
"zhiwei": "总监"
}, {
"name": "王晓华",
"age": 36,
"pinyin": "wang_xiao_hua",
"zhiwei": "职员"
}]
$scope.datas = dd;
$scope.zd = "按照年龄倒序排列";
$scope.op = function() {
var ds = [];
if($scope.see_name == "" || $scope.see_name == null) {alert("不能为空")} else {
for(var i = 0; i < dd.length; i++) {
if(dd[i].name == $scope.see_name) {
ds.push(dd[i])
}
}
$scope.datas = ds;
}
}
$scope.ishide = function() {
$scope.flag = !$scope.flag;
}
$scope.chagechecked = function() {
if($scope.zd == "按照年龄顺序排列") {
dd.sort(function(a, b) {
return a.age - b.age
})
} else if($scope.zd == "按照年龄倒序排列") {
dd.sort(function(a, b) {
return b.age - a.age
})
}
}
$scope.dele = function($index) {
var i = confirm("确定？");
if(i) {
dd.splice($index, 1);
}
}
$scope.insert = function() {
var zhig = {
"name": $scope.n_name,
"age": $scope.n_age,
"pinyin": $scope.n_pinyin,
"zhiwei": $scope.n_zhiwei
}
dd.push(zhig)
}
})
</script>
</html>
