angular的订单查询添加

来源：互联网发布：ai mac 破解版编辑：程序博客网时间：2024/04/29 20:21

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="angular-route.js" ></script>
<meta charset="UTF-8">
<title>月考练习</title>
<script>

var app=angular.module("myApp",['ngRoute']);

app.config(["$routeProvider",function($routeProvider){

$routeProvider
.when("/",{})
.when("/addOrder",{
controller:"addOrderCtrl",
templateUrl:"addOrder.html"
})
.otherwise({redirectTo:"/addOrder"});

}]);

app.controller("myCtrl",function($scope,$location){
$scope.orders = [{
id:1,
goodName:"iPone4",
userName:"张三",
num:15555555555555,
price:4999.00,
city:"北京",
time:"08-01 10:00",
state:"发货"
},{
id:2,
goodName:"小米6",
userName:"李四",
num:155666666666666,
price:2999.00,
city:"上海",
time:"09-01 10:00",
state:"已发货"
},{
id:3,
goodName:"华为P9",
userName:"王五",
num:15577777777777,
price:3999.00,
city:"天津",
time:"10-01 10:00",
state:"已收货"
},{
id:4,
goodName:"OPPO R11",
userName:"赵六",
num:155888888888,
price:4999.00,
city:"重庆",
time:"11-11 10:00",
state:"发货"
}];

$scope.goToPath=function(){
$location.path("/addOrder");
};

$scope.startTime = "开始月份";
$scope.endTime = "结束月份";
$scope.filterTime=function(index){
// alert(index+"asda");
var time =$scope.orders[index].time;
var month=parseInt(time.split("-")[0]);

if($scope.startTime == "开始月份" || $scope.endTime == "结束月份"){
return true;
}else{
var start =parseInt($scope.startTime);
var end = parseInt($scope.endTime);
if(month>=start &&month<=end){
return true;
}else{
return false;
}
}

};
$scope.changeState=function(index){
$scope.orders[index].state="已发货";

};

//
// $scope.selectCity=function(index){
//
// alert(index)
//
// if(city!="选择城市"){
// alert(city);
//
// }
// else{
// return true;
// }
//
// };
$scope.ct="选择城市";
//城市查询
$scope.scity=function (order) {
if( $scope.ct!="选择城市")
{
if($scope.ct==order.city)
{
return true;
}
else
{
return false;
}
}
else
{
return true;
}
}

$scope.zt="选择状态";
//城市查询
$scope.szt=function (order) {
if( $scope.zt!="选择状态")
{
if($scope.zt==order.state)
{
return true;
}
else
{
return false;
}
}
else
{
return true;
}
}

});

app.controller("addOrderCtrl",function($scope){
$scope.goodName="";
$scope.userName="";
$scope.num="";
$scope.city="选择城市";

$scope.li1=false;
$scope.li2=false;
$scope.li3=false;
$scope.li4=false;
$scope.li5=false;
$scope.li6=false;
$scope.li7=false;

$scope.sub=function(){
if($scope.goodName==null || $scope.goodName==""){
$scope.li1=true;
}else{
$scope.li1=false;
if($scope.goodName.length<6 || $scope.goodName.length>20){
alert("asf")
$scope.li2=true;
}else{
$scope.li2=false;

}

}

if($scope.userName==null || $scope.userName==""){
$scope.li3=true;
}else{
$scope.li3=false;
if($scope.userName.length<4 || $scope.userName.length>16){
$scope.li4=true;
}else{
$scope.li4=false;

}
}

if($scope.num==null || $scope.num==""){
$scope.li5=true;
}else{
$scope.li5=false;
if($scope.num.length==11){
if(isNaN($scope.num)){
$scope.li6=true;
}else{
$scope.li6=false;
}
}else{
$scope.li6=true;
}
}

if($scope.city=="选择城市"){
$scope.li7=true;

}else{
$scope.li7=false;
}

if(!$scope.li1 && !$scope.li2 && !$scope.li3 && !$scope.li4 &&
!$scope.li5 && !$scope.li6 && !$scope.li7){
var idMax=0;
for(index in $scope.orders){
if($scope.orders[index].id>idMax){
idMax=$scope.orders[index].id;
}
}

var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
var myTime = month+"-"+day+" "+hours+":"+minute;
var order={
id:idMax+1,
goodName:$scope.goodName,
userName:$scope.userName,
num:$scope.num,
price:2999.00,
city:$scope.city,
time:myTime,
state:"发货"
}
$scope.orders.push(order);

}else{

}

}
});

</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl" >
<center>
<h3>订单页面</h3>
<input type="text" placeholder="用户名搜索" size="8" ng-model="gName" />
<input type="text" placeholder="手机号搜索" size="8"ng-model="myAll" />


<select ng-model="ct">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>


<select ng-model="zt">
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
<option>已收货</option>
</select>

<select ng-model="startTime">
<option>开始月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
-
<select ng-model="endTime">
<option>结束月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select><br /><br />
<button ng-click="goToPath()">新增订单</button>
<button>批量发货</button><br /><br />
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>ID 排序</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格排序</th>
<th>城市</th>
<th>下单时间排序</th>
<th>状态</th>
</tr>
</thead>
<tbody>

<tr ng-repeat="order in orders | filter:{goodName:gName,num:myAll} | filter:scity | filter:szt" ng-if="filterTime($index)" ng-if="sect(order.city,ct)">
<th><input type="checkbox" /></th>
<th>{{order.id}}</th>
<th>{{order.goodName}}</th>
<th>{{order.userName}}</th>
<th>{{order.num}}</th>
<th>{{order.price}}</th>
<th>{{order.city}}</th>
<th>{{order.time}}</th>
<th>
<span ng-if="order.state == '发货'"><a ng-click="changeState($index)" href="#">{{order.state}}</a></span>
<span ng-if="order.state == '已发货'">{{order.state}}</span>
<span ng-if="order.state == '已收货'">{{order.state}}</span>
</th>
</tr>
</tbody>
</table>
</center>

<script type="text/ng-template" id="addOrder.html">
<center>
<h3>新增订单</h3>
商品名：<input type="text" ng-model="goodName" placeholder="6-20个字符"/><br /><br />
用户名：<input type="text" ng-model="userName" placeholder="4-16个字符"/><br /><br />
手机号：<input type="text" ng-model="num" placeholder="请输入11位手机号"/><br /><br />
城市：<select ng-model="city">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select><br />
<ul>
<li ng-show="li1">商品不能为空</li>
<li ng-show="li2">商品名必须是6-20个字符</li>
<li ng-show="li3">用户名不能为空</li>
<li ng-show="li4">用户名必须是4-16个字符</li>
<li ng-show="li5">手机号不能为空</li>
<li ng-show="li6">手机号格式不正确</li>
<li ng-show="li7">请选择城市</li>
</ul>
<input ng-click="sub()" type="button" value="提交"/><br />
</center>

</script>

<div ng-view>

</div>
</body>
</html>

阅读全文

0 0