angular综合题添加删除排序隔行变色等

最新推荐文章于 2020-06-26 09:08:55 发布

-久了久了就旧了

最新推荐文章于 2020-06-26 09:08:55 发布

阅读量358

点赞数 1

本文链接：https://blog.csdn.net/xiaozhang0414/article/details/78755305

版权

angular代码专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

2.用户信息添加页

3.删除询问框

实现用户数据列表展示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实现

实现用户数据列表展示5分，实现列表选中行变色5分，实现表格内行与行之间颜色区分5分，实现鼠标移动到删除上时变为小手样式5分。

3.实现排序下拉列表展示5分，实现按照年龄倒序排序5分，实现按照年龄正序排序5分

5.实现列表页面布局整洁5分，实现添加页面布局整洁5分

6. 实现点击删除时弹出二次确认询问框5分，实现删除功能，删除后从列表中消失5分。注：询问框可使用js的confirm实现

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>

<style type="text/css">
#div1 {
width: 500px;
height: 30px;
text-align: center;
}

#tab1 {
width: 500px;
height: 30px;
}
//*隔行变色*/
tr:nth-of-type(odd) {
background: yellow;
}
/*鼠标移入变色*/
tr:nth-of-type(odd):hover {
background: #41C7DB;
}
/*隔行变色*/
tr:nth-of-type(even) {
background: red;
}
/*鼠标移入变色*/
tr:nth-of-type(even):hover {
background: #41C7DB;
}

#div2 {
width: 300px;
height: 150px;
border: 1px solid black;
margin-top: 20px;
}
</style>

<body ng-app="myapp" ng-controller="mycontroller">

<div id="div1">
姓名查询条件 <input type="text" ng-model="name" />

<select ng-change="xl()" ng-model="age" ng-init="age=aes[1]">
<option ng-repeat="ae in aes">{{ae}}</option>
</select>
</div>
<table border="1px" cellspacing="0" cellpadding="0" id="tab1">
<tr>
<td colspan="5" style="background: white;">用户列表</td>
</tr>
<tr style="background: #999999;">
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>

<tr ng-repeat="emp in emps">
//赋值
<td>{{emp.name1}}</td>
<td>{{emp.age1}}</td>
<td>{{emp.pingying1}}</td>
<td>{{emp.zw1}}</td>
<td>
<a href="#" ng-click="dele($index)">删除</a>
</td>

</tr>

<tr>
<td colspan="5" align="center">
<input type="button" value="查询" ng-click="cx()" />
<input type="button" value="添加" ng-click="tj()" />

</td>
</tr>

</table>

<fieldset id=div2 ng-show="fs">
<legend>添加用户信息</legend>
<center>
<form>
姓名<input type="text" ng-model="name2" /><br/> 年龄
<input type="text" ng-model="age2" /><br/> 拼音
<input type="text" ng-model="pinying2" /><br/> 职位
<input type="text" ng-model="zw2" /><br/>
<input type="button" value="保存 " ng-click="bz()" />
</form>
</center>

</fieldset>

<script type="text/javascript">
var mo = angular.module("myapp", []);
mo.controller("mycontroller", function($scope) {
//给table赋值
$scope.emps = [{
"name1": "张三",
"age1": "45",
"pingying1": "zhangsan",
"zw1": "总经理",
"flas": false
}, {
"name1": "李四",
"age1": "44",
"pingying1": "lisi",
"zw1": "总经理",
"flas": false
}, {
"name1": "王五",
"age1": "43",
"pingying1": "wangwu",
"zw1": "总经理",
"flas": false
}];
//给下拉框的赋值
$scope.aes = ["按年龄正序", "按年龄倒序"];

//获取下拉拉事件
$scope.xl = function() {
//取出属性
var aa = $scope.age;
//取出的属性等不等于赋值的属性
if(aa == "按年龄正序") {
//排序死格式
$scope.emps.sort(function(a, b) {
return a.age1 - b.age1;
})
} else {
$scope.emps.sort(function(a, b) {
return b.age1 - a.age1;
})
}

}
//调用删除的方法 $index传过来的鼠标
$scope.dele = function($index) {
//confirm 警示框
var sf = confirm("是否删除");
if(sf) {
//删除
$scope.emps.splice($index, 1)
}

}

//调用查询的方法
$scope.cx = function() {
在点击查询的时候调用
$scope.emps = [{
"name1": "张三",
"age1": "45",
"pingying1": "zhangsan",
"zw1": "总经理",
"flas": false
}, {
"name1": "李四",
"age1": "44",
"pingying1": "lisi",
"zw1": "总经理",
"flas": false
}, {
"name1": "王五",
"age1": "43",
"pingying1": "wangwu",
"zw1": "总经理",
"flas": false
}];
//查询条件框内的内容为空点击
if($scope.name == null || $scope.name == "") {
alert("请输入姓名！！！");
return;

}
// 输入用有敏感词“傻逼”
if($scope.name.indexOf("傻逼") > -1) {
alert("非法字符！！！");
return;

}
//设置一个空数组
var mz = [];
//遍历emps数组
for(var i = 0; i < $scope.emps.length; i++) {

if($scope.name == $scope.emps[i].name1) { //用name值是一样的

mz.push($scope.emps[i]);//放数组
}

}

if(mz.length == 0) {//如果数组历没有就是0
alert("没有此人！！！");
return;
}
$scope.emps = mz;//把数组赋给emps这个数组
}
//点击添加的时候显示隐藏的表单
$scope.tj = function() {

$scope.fs = true//true是隐藏

}

$scope.bz = function() {

var aa = /^[0-9]+$/;//判断是否是纯数字
//不是数字就弹出格式错误
if(!aa.test($scope.age2)) {

alert("格式不对");

return;
}
//添加的数据
var aa = {
"name1": $scope.name2,
"age1": $scope.age2,
"pingying1": $scope.pinying2,
"zw1": $scope.zw2,
"flas": false
}

$scope.emps.push(aa); //放进数组
//添加完毕，将输入框清空
$scope.name2 = ""
$scope.age2 = ""
$scope.pinying2 = ""
$scope.zw2 = ""
//在隐藏
$scope.fs = false;

}

})
</script>
</body>

</html>

-久了久了就旧了

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular综合题添加删除排序隔行变色等

2.用户信息添加页3.删除询问框实现用户数据列表展示5分，实现列表选中行变色5分，实现表格内行与行之间颜色区分5分，实现鼠标移动到删除上时变为小手样式5分。 2.实现姓名查询条件框5分，实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分，实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”5分，当搜索内容有
复制链接

扫一扫