<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1.布局，css调样式，实现隔行变色
2.按照姓名和产地查找
3.排序：
数量正序
数量倒序
时间正序
时间倒序
4.删除：定义删除方法，并传入下标，按照下标删除
5.实现入库按钮：
显示添加框
获取输入内容
点击添加按钮，将数据添加到数组中，
隐藏添加框
-->
<style>* {
margin: 0 auto;
padding: 0;
}
body {
position: relative;
width: 700px;
height: 500px;
}
#div1 {
margin-top: 20px;
width: 500px;
height: 300px;
}
#div2 {
float: right;
margin-left: 100px;
}
.ta1 {
margin-top: 10px;
width: 500px;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
/*隔行变色*/
.tr1 {
background: #EEEEEE;
}
.tr2 {
background: #FFFFFF;
}
.but1 {
margin-top: 20px;
margin-left: 100px;
background: ghostwhite;
width: 100px;
height: 40px;
border-radius: 8px;
}
.div3 {
text-align: center;
width: 300px;
position: absolute;
margin-top: 10px;
margin-left: 100px;
margin-left: ;
font-size: 23px;
border: 1px solid yellowgreen;
}
.div3 input {
margin-top: 5px;
height: 30px;
}
#aa {
cursor: pointer;
}</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycrl">
<div id="div1">
姓名查询条件<input type="text" ng-model="chaname"/>
<div id="div2">
<select ng-model="selectname" ng-init="selectname=order[0]" ng-change="chan()" ng-options="item for item in order">{{item}}</select>
</div>
<table border="1px" cellpadding="0px" cellspacing="0px" class="ta1">
<tr style="background: #999999;">
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
<tr ng-repeat="s in student1" class="{{ $even ? 'tr1': 'tr2'}}">
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td>{{s.pin}}</td>
<td>{{s.zhiwei}}</td>
<td><a href="#" ng-click="dele($index)" id="aa">删除</a></td>
</tr>
</table>
<input class="but1" type="button" value="查询" ng-click="cha()"/>
<input class="but1" type="button" value="添加" ng-click="add()"/>
<div class="div3" ng-show="isshow">
姓名<input type="text" class="name" ng-model="name"/><br />
年龄<input type="text" class="age" ng-model="age"/><br />
拼音<input type="text" class="pin" ng-model="pin"/><br />
职位<input type="text" class="zhiwei" ng-model="zhiwei"/><br />
<input type="button" ng-click="bc()" value="保存" style="width: 100px;font-size: 23px;height: 40px;margin-left: 40px;" />
</div>
</div>
<script type="text/javascript">var mo = angular.module("myapp", []);
mo.controller("mycrl", function($scope) {
$scope.order = ["请选择排序方式", "按照年龄倒序排序", "按照年龄正序排序"];
//用于开始展示数据
var student = [{
"name": "张三",
"age": 45,
"pin": "zhang san",
"zhiwei": "总经理"
},
{
"name": "李四",
"age": 43,
"pin": "li si",
"zhiwei": "设计师"
}
];
//查询时用的数据
$scope.student1 = [];
$scope.student1 = student;
//排序
$scope.chan = function() {
var selectn = $scope.selectname;
if(selectn == "按照年龄正序排序") {
$scope.student1.sort(function(a, b) {
return a.age - b.age;
})
} else if(selectn == "按照年龄倒序排序") {
$scope.student1.sort(function(a, b) {
return b.age - a.age;
})
}
}
//查询
$scope.cha = function() {
var na = $scope.chaname;
if(na == "" || na == undefined) {
alert("请输入姓名");
return "";
}
if(na.indexOf("擦") != -1) {
alert("搜索内容有敏感词");
return "";
}
var newname = [];
for(var i = 0; i < student.length; i++) {
//获取数组的元素
var na = student[i].name;
//判断是否符合
if(na.indexOf($scope.chaname) != -1) {
//添加到新集合
newname.push(student[i]);
}
}
if(newname.length == 0) {
alert("未找到内容");
return "";
} else {
//把数据付给要展示的集合
$scope.student1 = newname;
return "";
}
}
//点击添加按钮要显示添加框
$scope.add = function() {
$scope.isshow = true;
}
//点击保存按钮
$scope.bc = function() {
//获取数据
var name = $scope.name;
var te = /^[0-9]+$/;
var age = $scope.age;
var pin = $scope.pin;
var zhiwei = $scope.zhiwei;
//判断年龄
if(te.test(age) == false) {
alert("年龄格式错误");
return;
}
//添加到数组初始化的数组
student.push({
"name": name,
"age": age,
"pin": pin,
"zhiwei": zhiwei
});
//在赋值给展示的数组
$scope.student1 = student;
//添加后将输入框赋值为""
$scope.name = "";
$scope.age = "";
$scope.pin = "";
$scope.zhiwei = "";
//隐藏添加表格
$scope.isshow = false;
}
//删除
$scope.dele = function($index) {
var falg = confirm("是否删除");
if(falg) {
//删除初始化数组的元素
for(var i = 0; i < student.length; i++) {
if(student[i].name == $scope.student1[$index].name) {
student.splice(i, 1);
}
}
//删除展示数组的元素
$scope.student1=student;
alert("删除成功");
}
}
});</script>
</body>
</html>
