AngularJS订单管理系统-优快云博客

本文链接：https://blog.youkuaiyun.com/nyf19980311/article/details/78862198

	<!DOCTYPE html>
	<html>
	<style>
	.red{
	border: 1px solid red;
	}
	.pink{
	border: ;
	}

	</style>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="../angualr/angular.js" ></script>
	<script>
	var app=angular.module("myApp",[]);
	app.controller("myCtlr",function($scope){

	$scope.user=[{id:2001,mc:"iPhoneX",name:"张三",phone:13525565588,price:8699,city:"北京",time:"11-23 10:00:00",state:false,val:2,huo:"已发货"},
	{id:3006,mc:"iPhone6",name:"王红",phone:18552465588,price:5635,city:"郑州",time:"11-23 11:38:20",state:false,val:2,huo:"已发货"},
	{id:5312,mc:"iPhone7",name:"赵小龙",phone:17545585598,price:6180,city:"北京",time:"11-20 09:17:30",state:false,val:1,huo:"未发货"},
	{id:2132,mc:"iPhone8",name:"赵强",phone:17625565618,price:7190,city:"上海",time:"11-23 10:40:21",state:false,val:1,huo:"未发货"}];

	$scope.xzddflog=false;
	$scope.xzdd=function(){
	$scope.xzddflog=true;
	}
	$scope.tsid=false;
	$scope.tsmc=false;
	$scope.tsname=false;
	$scope.tsphone=false;
	$scope.tsprice=false;
	$scope.tscity=false;
	$scope.newcity="请选择";
	$scope.bc=function(){
	if($scope.newid==null\|\|$scope.newid==""){
	$scope.tsid=true;
	}else{
	$scope.tsid=false;
	}
	if($scope.newmc==null\|\|$scope.newmc==""){
	$scope.tsmc=true;
	}else{
	$scope.tsmc=false;
	}
	if($scope.newname==null\|\|$scope.newname==""){
	$scope.tsname=true;
	}else{
	$scope.tsname=false;
	}
	if($scope.newphone==null\|\|$scope.newphone==""){
	$scope.tsphone=true;
	}else{
	$scope.tsphone=false;
	}
	if($scope.newcity=="请选择"){
	$scope.tscity=true;
	}else{
	$scope.tscity=false;
	}
	if($scope.newprice==null\|\|$scope.newprice==""){
	$scope.tsprice=true;
	}else{
	$scope.tsprice=false;
	}
	if($scope.tsid\|\|$scope.tsmc\|\|$scope.tsname\|\|$scope.tsphone\|\|$scope.tsprice\|\|$scope.tscity){


	}else{
	var date=new Date();
	var yue=date.getMonth()+1;
	var re=date.getDate();
	var shi=date.getHours();
	var fen=date.getMinutes();
	var mia=date.getSeconds();
	if(mia<10){
	var miao=0+""+mia;
	}else{
	var miao=mia;
	}
	$scope.user.push({id:parseInt($scope.newid),mc:$scope.newmc,name:$scope.newname,phone:$scope.newphone,price:parseInt($scope.newprice),city:$scope.newcity,time:yue+"-"+re+" "+shi+":"+fen+":"+miao,state:false,val:1,huo:"未发货"});
	$scope.xzddflog=false;
	}
	}
	$scope.paixu;
	var idflog=true;
	var jgflog=true;
	var sjflog=true;
	$scope.idpx=function(){
	if(idflog){
	$scope.paixu="id";
	idflog=false;
	}else{
	$scope.paixu="-id";
	idflog=true;
	}
	}
	$scope.jgpx=function(){
	if(jgflog){
	$scope.paixu="price";
	jgflog=false;
	}else{
	$scope.paixu="-price";
	jgflog=true;
	}
	}
	$scope.sjpx=function(){
	if(sjflog){
	$scope.paixu="time";
	sjflog=false;
	}else{
	$scope.paixu="-time";
	sjflog=true;
	}
	}

	$scope.huo=function(id){
	for(a in $scope.user){
	if($scope.user[a].id==id){
	$scope.user[a].huo="已发货";
	$scope.user[a].val=2;
	$scope.mm="red";
	}
	}
	}
	$scope.plsc=function(){

	var arr=[];
	for(a in $scope.user){
	if($scope.user[a].state){
	arr.push($scope.user[a]);
	}
	}
	for(b in arr){
	for(c in $scope.user){
	if(arr[b].name==$scope.user[c].name){
	if($scope.user[c].val==2){
	$scope.user.splice(c,1);
	}
	}
	}
	}
	}
	$scope.che=function(id){
	for(c in $scope.user){
	if(id==$scope.user[c].id){
	$scope.user[c].state=true;
	}
	}
	}
	})
	</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtlr">
	<button ng-click="xzdd()">新增订单</button><button ng-click="plsc()">批量删除</button><input type="text" ng-model="newName" placeholder="请输入商品名称查询"/><input type="text" ng-model="newPhone" placeholder="按手机好查询"/>
	<select ng-model="zt">
	<option value="">按状态查询</option>
	<option value="2">已发货</option>
	<option value="1">未发货</option>
	</select>
	<table border="1px solid red" cellpadding="10px" cellspacing="0px">
	<tr>
	<td><input type="checkbox"/></td>
	<td ng-click="idpx()">id</td>
	<td>商品名称</td>
	<td>用户名</td>
	<td>手机号</td>
	<td ng-click="jgpx()">价格</td>
	<td>城市</td>
	<td ng-click="sjpx()">下单时间</td>
	<td>状态</td>
	</tr>
	<tr ng-repeat="a in user \|orderBy:paixu \|filter:{'mc':newName} \|filter:{'phone':newPhone} \|filter:{'val':zt}">
	<td><input type="checkbox" ng-click="che(a.id)"/></td>
	<td>{{a.id}}</td>
	<td>{{a.mc}}</td>
	<td>{{a.name}}</td>
	<td>{{a.phone}}</td>
	<td>{{a.price \|currency:("￥")}}</td>
	<td>{{a.city}}</td>
	<td>{{a.time}}</td>
	<td><button ng-click="huo(a.id)" class="{{mm}}">{{a.huo}}</button></td>
	</tr>
	</table>
	<div style="border: 1px solid black; width: 500px; height: 400px;" ng-show="xzddflog">
	商品id:<input type="text" ng-model="newid" /><span ng-show="tsid" style="background: yellow;">商品ID不能为空</span><br>
	商品名:<input type="text" ng-model="newmc" /><span ng-show="tsmc" style="background: yellow;">商品名不能为空</span><br>
	商品名:<input type="text" ng-model="newname" /><span ng-show="tsname" style="background: yellow;">用户名不能为空</span><br>
	手机号:<input type="text" ng-model="newphone" /><span ng-show="tsphone" style="background: yellow;">手机号不能为空</span><br>
	价格为:<input type="text" ng-model="newprice" /><span ng-show="tsprice" style="background: yellow;">价格不能为空</span><br>
	城市:<select ng-model="newcity">
	<option>请选择</option>
	<option>上海</option>
	<option>北京</option>
	<option>广州</option>
	</select><span ng-show="tscity" style="background: yellow;">城市必须选</span><br>
	<button ng-click="bc()">保存</button>
	</div>
	</body>
	</html>