<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Month模拟4</title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<style>
table tr:nth-child(odd){
background: grey;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("kongzhiqi",["$scope",function($scope){
$scope.users=[
{state: false,id:2001,spname:"iPoneX",name:"张三",phone:135565588,price:8699,city:"北京",time:new Date('11-23 10:00:00'),zhuangtai:"已发货"},
{state: false,id:3006,spname:"iPone6",name:"网红",phone:185324588,price:5635,city:"郑州",time:new Date('11-23 11:38:20'),zhuangtai:"已发货"},
{state: false,id:5312,spname:"iPone7",name:"赵小龙",phone:175455858,price:6180,city:"北京",time:new Date('11-20 09:17:30'),zhuangtai:"未发货"},
{state: false,id:2132,spname:"iPone8",name:"赵强",phone:176255656,price:7190,city:"上海",time:new Date('11-23 10:40:21'),zhuangtai:"未发货"}
];
//全选的操作
$scope.ckAll = function() {
for(var i in $scope.users) {
$scope.users[i].state = $scope.ckall;
}
}
$scope.del=function(){
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].state){
$scope.users.splice(i,1);
i--; //让下个值从删除的索引开始
}
}
}
//排序
$scope.orderID = function (desc, od) {
$scope.order = 'iden';
}
$scope.orderPrice = function (desc, od) {
$scope.order = 'price';
}
$scope.orderTime = function (desc, od) {
$scope.order = 'downtime';
}
$scope.q1=false;
$scope.q2=false;
$scope.q3=false;
$scope.q4=false;
$scope.q5=false;
$scope.q1_1=false;
$scope.q1_2=false;
$scope.q1_3=false;
$scope.q1_4=false;
$scope.q6=false;
$scope.q1_6=false;
$scope.add=function(){
//商品名验证
if($scope.uspname==null||$scope.uspname==""){
$scope.q1=true;
}else{
if($scope.uspname.length<=6||$scope.uspname.length>=10){
$scope.q1_1=true;
}
$scope.q1=false;
}
//用户名验证
if($scope.uname==null||$scope.uname==""){
$scope.q2=true;
}else{
if($scope.uname.length<=4||$scope.uname.length>=10){
$scope.q1_2=true;
}
$scope.q2=false;
}
//手机号验证
if($scope.uphone==null||$scope.uphone==""){
$scope.q3=true;
}else{
if(!$scope.uphone.length==11){
$scope.q1_3=true;
}
$scope.q3=false;
}
//id验证
if($scope.uid==null||$scope.uid==""){
$scope.q6=true;
}else{
if(!$scope.uid.length==11){
$scope.q1_6=true;
}
$scope.q6=false;
}
//价格验证
if($scope.uprice==null||$scope.uprice==""){
$scope.q4=true;
}else{
$scope.q4=false;
}
if($scope.ucity==null||$scope.ucoty==""){
$scope.q5=true;
}else{
$scope.q5=false;
}
if(!$scope.q1 && !$scope.q1_1 && !$scope.q2 && !$scope.q1_2 && !$scope.q3&& !$scope.q1_3&& !$scope.q4&& !$scope.q1_4&& !$scope.q5){
$scope.add=function(){
var uid=$scope.uid;
var uspname=$scope.uspname;
var uname=$scope.uname;
var uphone=$scope.uphone;
var uprice=$scope.uprice;
var ucity=$scope.ucity;
var utime=new Date;
$scope.users.push(
{id:uid,spname:uspname,name:uname,phone:uphone,price:uprice,city:ucity,time:utime,zhuangtai:"未发货"}
);
}
}
}
}]);
</script>
</head>
<body ng-app="myapp" ng-controller="kongzhiqi">
<button style="background: dodgerblue;" ng-click="toadd=true">新增订单</button>
<button style="background: dodgerblue;" ng-click="del()">批量删除</button>
<input type="text" placeholder="按商品名查询" ng-model="spname1"/>
<input type="text" placeholder="按手机号查询" ng-model="phone1"/>
<select ng-model="zhuangtai1">
<option>--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select>
<br><br>
<table border="1px soild">
<tr>
<td>
<input type="checkbox" ng-model="ckall" ng-click="ckAll()"/>
</td>
<td>
id
<button ng-click="orderID(desc=!desc)">排序</button>
</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>
价格
<button ng-click="orderPrice(desc=!desc)">排序</button>
</td>
<td>城市</td>
<td>
下单时间
<button ng-click="orderTime(desc=!desc)">排序</button>
</td>
<td>状态</td>
</tr>
<tr ng-repeat="u in users|filter:{spname:spname1,phone:phone1,zhuangtai:zhuangtai1}|orderBy:idpx">
<td>
<input type="checkbox" ng-model="u.state" />
</td>
<td>{{u.id}}</td>
<td>{{u.spname}}</td>
<td>{{u.name}}</td>
<td>{{u.phone}}</td>
<td>{{u.price|currency:"¥"}}</td>
<td>{{u.city}}</td>
<td>{{u.time|date:'MM-dd hh:mm:ss'}}</td>
<td>
<a href="#" style="background: yellow;" ng-show="u.zhuangtai == '未发货'" ng-click="u.zhuangtai = '已发货'">
未发货</a>
<span style="background: green;" ng-show="u.zhuangtai == '已发货'">{{u.zhuangtai}}</span>
</td>
</tr>
</table>
<br><br><br><hr/>
<span style="margin-left: 100px;">新增订单</span><br><br>
<form ng-show="toadd">
id <input type="text" ng-model="uid" placeholder="请输入id">
<span style="background: yellow;" ng-show="q6">id不能为空</span>
<span style="background: yellow;" ng-show="q1_6">id必须是纯数字</span><br>
商品名 <input type="text" ng-model="uspname" placeholder="请输入6-10个字符的商品名">
<span style="background: yellow;" ng-show="q1">商品不能为空</span>
<span style="background: yellow;" ng-show="q1_1">商品名必须是6-10个字符</span><br>
用户名 <input type="text" ng-model="uname" placeholder="请输入4-10个字符的用户名">
<span style="background: yellow;" ng-show="q2">用户名不能为空</span>
<span style="background: yellow;" ng-show="q1_2">用户名必须是4-10个字符</span><br>
手机号 <input type="text" ng-model="uphone" placeholder="请输入11个字符的手机号">
<span style="background: yellow;" ng-show="q3">手机号不能为空</span>
<span style="background: yellow;" ng-show="q1_3">长度必须等于11</span><br>
价格为 <input type="text" ng-model="uprice" placeholder="必须是纯数字">
<span style="background: yellow;" ng-show="q4">价格不能为空</span>
<span style="background: yellow;" ng-show="q1_4">价格必须是纯数字</span><br>
城市
<select ng-model="ucity">
<option>北京</option>
<option>郑州</option>
<option>上海</option>
<option>深圳</option>
</select>
<span style="background: yellow;" ng-show="q5">请选择城市</span><br><br>
<button style="margin-left: 100px;" ng-click="add()">保存</button>
</form>
</body>
</html>