<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("jun",[])
.controller("dd",function($scope,$filter){
// $scope.peoples=[]
// .实现用户数据列表展示5分
$scope.people=[{
"name":"张三",
"age":45,
"pinyin":"zhangsan",
"work":"总经理"
},{
"name":"李四",
"age":43,
"pinyin":"lisi",
"work":"设计师"
},{
"name":"王五",
"age":40,
"pinyin":"wangwu",
"work":"工程师"
},{
"name":"赵六",
"age":45,
"pinyin":"zhaoliu",
"work":"工程师"
},{
"name":"周七",
"age":45,
"pinyin":"zhouqi",
"work":"人事经理"
}];
$scope.add=function(){
}
$scope.bc=function(){
if (!/^\d+$/.test($scope.age)) {
alert("年龄格式错误");
}else{
$scope.people.push({
"name":$scope.name,
"age":$scope.age,
"pinyin":$scope.pinyin,
"work":$scope.work
})
}
}
// 实现姓名查询条件框5分,
// 实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分,
// 实现按姓名搜索表格内容功能5分,
// 当搜索内容未找到匹配项时提示”未找到内容”5分,
// 当搜索内容有敏感词时,
// alert提示5分
$scope.xun="";
$scope.sel=function(){
if($scope.namefilter==""||$scope.namefilter==undefined){
alert("请输入姓名");
}else{
if($scope.namefilter=="三"){
alert("有敏感词");
$scope.namefilter=""
}else{
var f=$filter("filter")($scope.people,{"name":$scope.namefilter});
if(f==0){
alert("未找到内容");
}else{
$scope.xun=$scope.namefilter;
}
}
return;
}
}
// 实现点击删除时弹出二次确认询问框5分,实现删除功能,删除后从列表中消失5分。
$scope.del=function($index){
var a=confirm("是否删除");
if (a) {
$scope.people.splice($index,1);
alert("删除成功");
}
}
})
</script>
<style type="text/css">
/*实现用户数据列表展示5分,实现列表选中行变色5分,实现表格内行与行之间颜色区分5分,实现鼠标移动到删除上时变为小手样式5分*/
tr:nth-child(odd){
background-color: #EEEEEE;
}
tr:hover{
background-color: yellow;
}
</style>
</head>
<body ng-app="jun" ng-controller="dd">
姓名查询条件
<input ng-model="namefilter"/>
<!--实现排序下拉列表展示5分,实现按照年龄倒序排序5分,实现按照年龄正序排序5分-->
<select ng-model="agefilter">
<option>请选择</option>
<option value="age">按年龄正序</option>
<option value="-age">按年龄倒序</option>
</select>
<br />
<br />
用户列表
<table border="1px" cellspacing="1px" cellpadding="1px">
<tr>
<th>
姓名
</th>
<th>
年龄
</th>
<th>
拼音
</th>
<th>
职位
</th>
<th>
操作
</th>
</tr>
<tr ng-repeat="p in people |orderBy:agefilter|filter:{name:xun}" >
<td>
{{p.name}}
</td>
<td>
{{p.age}}
</td>
<td>
{{p.pinyin}}
</td>
<td>
{{p.work}}
</td>
<td>
<a href="" ng-click="del($index)">删除</a>
</td>
</tr>
</table>
<button ng-click="sel()">查询</button>
<button ng-click="add()">添加用户</button>
<form id="people">
<fieldset>
<legend>
添加用户信息
</legend>
姓名
<input ng-model="name"/>
<br />
<br />
年龄
<input ng-model="age"/>
<br />
<br />
拼音
<input ng-model="pinyin"/>
<br />
<br />
职位
<input ng-model="work"/>
<br />
<br />
<button ng-click="bc()">保存</button>
</fieldset>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("jun",[])
.controller("dd",function($scope,$filter){
// $scope.peoples=[]
// .实现用户数据列表展示5分
$scope.people=[{
"name":"张三",
"age":45,
"pinyin":"zhangsan",
"work":"总经理"
},{
"name":"李四",
"age":43,
"pinyin":"lisi",
"work":"设计师"
},{
"name":"王五",
"age":40,
"pinyin":"wangwu",
"work":"工程师"
},{
"name":"赵六",
"age":45,
"pinyin":"zhaoliu",
"work":"工程师"
},{
"name":"周七",
"age":45,
"pinyin":"zhouqi",
"work":"人事经理"
}];
$scope.add=function(){
}
$scope.bc=function(){
if (!/^\d+$/.test($scope.age)) {
alert("年龄格式错误");
}else{
$scope.people.push({
"name":$scope.name,
"age":$scope.age,
"pinyin":$scope.pinyin,
"work":$scope.work
})
}
}
// 实现姓名查询条件框5分,
// 实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分,
// 实现按姓名搜索表格内容功能5分,
// 当搜索内容未找到匹配项时提示”未找到内容”5分,
// 当搜索内容有敏感词时,
// alert提示5分
$scope.xun="";
$scope.sel=function(){
if($scope.namefilter==""||$scope.namefilter==undefined){
alert("请输入姓名");
}else{
if($scope.namefilter=="三"){
alert("有敏感词");
$scope.namefilter=""
}else{
var f=$filter("filter")($scope.people,{"name":$scope.namefilter});
if(f==0){
alert("未找到内容");
}else{
$scope.xun=$scope.namefilter;
}
}
return;
}
}
// 实现点击删除时弹出二次确认询问框5分,实现删除功能,删除后从列表中消失5分。
$scope.del=function($index){
var a=confirm("是否删除");
if (a) {
$scope.people.splice($index,1);
alert("删除成功");
}
}
})
</script>
<style type="text/css">
/*实现用户数据列表展示5分,实现列表选中行变色5分,实现表格内行与行之间颜色区分5分,实现鼠标移动到删除上时变为小手样式5分*/
tr:nth-child(odd){
background-color: #EEEEEE;
}
tr:hover{
background-color: yellow;
}
</style>
</head>
<body ng-app="jun" ng-controller="dd">
姓名查询条件
<input ng-model="namefilter"/>
<!--实现排序下拉列表展示5分,实现按照年龄倒序排序5分,实现按照年龄正序排序5分-->
<select ng-model="agefilter">
<option>请选择</option>
<option value="age">按年龄正序</option>
<option value="-age">按年龄倒序</option>
</select>
<br />
<br />
用户列表
<table border="1px" cellspacing="1px" cellpadding="1px">
<tr>
<th>
姓名
</th>
<th>
年龄
</th>
<th>
拼音
</th>
<th>
职位
</th>
<th>
操作
</th>
</tr>
<tr ng-repeat="p in people |orderBy:agefilter|filter:{name:xun}" >
<td>
{{p.name}}
</td>
<td>
{{p.age}}
</td>
<td>
{{p.pinyin}}
</td>
<td>
{{p.work}}
</td>
<td>
<a href="" ng-click="del($index)">删除</a>
</td>
</tr>
</table>
<button ng-click="sel()">查询</button>
<button ng-click="add()">添加用户</button>
<form id="people">
<fieldset>
<legend>
添加用户信息
</legend>
姓名
<input ng-model="name"/>
<br />
<br />
年龄
<input ng-model="age"/>
<br />
<br />
拼音
<input ng-model="pinyin"/>
<br />
<br />
职位
<input ng-model="work"/>
<br />
<br />
<button ng-click="bc()">保存</button>
</fieldset>
</form>
</body>
</html>