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

本文链接：https://blog.youkuaiyun.com/qq_40089806/article/details/78862238

本文介绍了一个使用AngularJS实现的订单管理系统，该系统具备增删查改订单的基本功能，并支持商品名、手机号及订单状态的过滤查询，同时实现了表格数据的排序功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

Month3