<!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>
<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>