Month

来源：互联网发布：linux 设备与模块编辑：程序博客网时间：2024/05/01 01:18

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>王彦勇月考技能</title>
<script src="js/angular.min.js"></script>
<style>
table tr:nth-child(odd){
background: steelblue;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("kongzhiqi",["$scope",function($scope){
$scope.users=[{id:1,name:"张三",age:21,sex:"男",tel:18611111111,like:"只爱学习"},
{id:2,name:"李四",age:20,sex:"男",tel:18622222222,like:"独自学习"},
{id:3,name:"小花",age:19,sex:"女",tel:18633333333,like:"听着歌学习"},
{id:4,name:"翠花",age:18,sex:"女",tel:18644444444,like:"看书学习"},
{id:5,name:"小风",age:18,sex:"男",tel:18655555555,like:"去图书馆看书"}];

//删除操作
$scope.del=function(index){
$scope.users.splice(index,1);
}

$scope.q1=false;
$scope.q2=false;
$scope.q3=false;
$scope.q4=false;
$scope.q5=false;
$scope.q6=false;

//添加
$scope.add=function(){

//id验证
if($scope.uid==null||$scope.uid==""){
$scope.q1=true;
}else{
$scope.q1=false;
}

//姓名验证
if($scope.uname==null||$scope.uname==""){
$scope.q2=true;
}else{
$scope.q2=false;
}

//年龄验证
if($scope.uname==null||$scope.uname==""){
$scope.q3=true;
}else{
$scope.q3=false;
}

//性别验证
if($scope.uname==null||$scope.uname==""){
$scope.q4=true;
}else{
$scope.q4=false;
}

//联系方式验证
if($scope.uname==null||$scope.uname==""){
$scope.q5=true;
}else{
$scope.q5=false;
}

//爱好验证
if($scope.uname==null||$scope.uname==""){
$scope.q6=true;
}else{
$scope.q6=false;
}

if(!$scope.q1&&!$scope.q2&&!$scope.q3&&!$scope.q4&&!$scope.q5&&!$scope.q6){

var uid=$scope.uid;
var uname=$scope.uname;
var uage=$scope.uage;
var usex=$scope.usex;
var utel=$scope.utel;
var ulike=$scope.ulike;
$scope.users.push({id:uid,name:uname,age:uage,sex:usex,tel:utel,like:ulike});

}else{
alert("输入有误！！！");
}
}

}]);

</script>
</head>

<body ng-app="myapp" ng-controller="kongzhiqi">
年龄排序
<select ng-model="order">
<option value="">请选择</option>
<option value="+age">年龄正序</option>
<option value="-age">年龄倒序</option>
</select>

    

id排序
<select ng-model="order">
<option value="">请选择</option>
<option value="+id">id正序</option>
<option value="-id">id倒序</option>
</select>

    

姓名<input type="text" ng-model="cxname"/><button>按照姓名查询</button>

    

<button ng-click="toadd=true">添加新用户</button>

<br><br>

<table border="1px soild" >
<tr align="center" style="background: gray;">
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>联系方式</td>
<td>爱好</td>
<td style="background: beige;">操作</td>
</tr>
<tr align="center" ng-repeat="u in users|filter:{name:cxname} | orderBy:order|orderBy:order">
<td>
{{u.id}}
<input ng-model="u.id" ng-show="xg"/>

</td>
<td>
{{u.name}}
<input ng-model="u.name" ng-show="xg"/>

</td>
<td>
{{u.age}}
<input ng-model="u.age" ng-show="xg"/>

</td>
<td>
{{u.sex}}
<input ng-model="u.sex" ng-show="xg"/>

</td>
<td>
{{u.tel}}
<input ng-model="u.tel" ng-show="xg"/>

</td>
<td>
{{u.like}}
<input ng-model="u.like" ng-show="xg"/>

</td>
<td>
<a href="#" style="color: red;" ng-show="!xg" ng-click="xg=!xg">修改</a>  
<button ng-click="xg=!xg" >保存</button>
 
<a href="#" style="color: red;" ng-click="del($index)">删除</a>
</td>
</tr>
</table>

<br/><br/><br/>

<form ng-show="toadd">

id           
<input type="text" ng-model="uid">
<span ng-show="q1">id不能为空</span><br><br>

姓名        <input type="text" ng-model="uname">
<span ng-show="q2">姓名不能为空</span><br><br>

年龄        <input type="number" ng-model="uage"/>
<span ng-show="q3">年龄不能为空</span><br><br>

性别         <select ng-model="usex">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select>
<span ng-show="q4">请选择性别</span><br><br>

联系方式  <input type="number" ng-model="utel"/>
<span ng-show="q5">请填写联系方式</span><br><br>

爱好         <input type="text" ng-model="ulike"/>
<span ng-show="q6">爱好不能为空</span><br><br>

               

<button ng-click="add()">添加</button>            
<button ng-click="clear()">清空</button>

</form>
</body>
</html>

阅读全文

0 0