商品

最新推荐文章于 2023-12-03 18:57:10 发布

lsq666888

最新推荐文章于 2023-12-03 18:57:10 发布

阅读量175

点赞数

本文链接：https://blog.csdn.net/lsq666888/article/details/79672294

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr:nth-child(odd){
background: chartreuse;
}
tr:nth-child(even){
background: darkcyan;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>

<script>
var app=angular.module("myApp",[]);
app.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(data){
$scope.stus=data;
})
//批量删除
$scope.del=function(){
//遍历数组
for(var i=0;i<$scope.stus.length;i++){
if($scope.stus[i].ck){
$scope.stus.splice(i,1);
i--;

}
}
}
//新增订单
//新增订单
$scope.newId = "";
$scope.newGname = "";
$scope.newUname = "";
$scope.newTel = "";
$scope.newPrice = "";
$scope.newCity = "";
$scope.newRegdate = "";
$scope.newState = "";
$scope.checkSub = [];
$scope.divShow = false;
$scope.sub=function(){
$scope.checkSub = []; //存放错误信息的数组
if($scope.newId=="" || $scope.newId == null){
$scope.checkSub.push("产品编号为空");
}
if($scope.newGname=="" || $scope.newGname==null){
$scope.checkSub.push("商品名不能为空");
}
if($scope.newUname == "" || $scope.newUname == null){
$scope.checkSub.push("用户名不能为空");
}
if($scope.newTel == "" || $scope.newTel == null){
$scope.checkSub.push("手机号不能为空");
}
if($scope.newPrice == "" || $scope.newPrice == null){
$scope.checkSub.push("价格不能为空");
}
if($scope.newCity == "" || $scope.newCity == null){
$scope.checkSub.push("城市必须选择");
}

if($scope.newRegdate == "" || $scope.newRegdate == null){
$scope.checkSub.push("下单时间不能为空");
}
if($scope.checkSub.length > 0){

$scope.divShow = true;
}
else {
$scope.divShow = false;
var newPro = {
"id":$scope.newId,
"gname": $scope.newGname,
"uname": $scope.newUname,
"tel": $scope.newTel,

"price": parseInt($scope.newPrice),
"city": $scope.newCity,
"regdate":$scope.newRegdate,
"state":$scope.newState,
};
$scope.stus.push(newPro);
}

}

//全选
$scope.All=function(){
for(var i=0;i<$scope.stus.length;i++){
$scope.stus[i].ck=$scope.flag;
}
}
})
</script>
</head>

<body ng-app="myApp" ng-controller="ctrl">

<button ng-click="formShow=true" style=" background: dodgerblue;">添加产品</button>
<button ng-click="del()" style="background: dodgerblue;" >批量删除</button>
<input type="text" placeholder="按照商品名称查询" ng-model="shangpin"/>
<input type="text" placeholder="按照手机号查询查询" ng-model="sj" />

<select ng-model="fh">
<option value="">--按照状态查询--</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>

<table border="1px">
<tr style="background-color: darkgrey;">
<td><input type="checkbox" ng-model="flag" ng-click="All()"></td>
<td ng-click="px='-id'">id</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td ng-click="px='-price'">价格</td>
<td>城市</td>
<td ng-click="px='-rgdate'">下单时间</td>
<td>状态</td>

</tr>
<tr ng-repeat="s in stus | filter:{gname:shangpin,tel:sj,state:fh} |orderBy:px">
<td><input type="checkbox" ng-model="s.ck"></td>
<td >{{s.id}}</td>
<td>{{s.gname}}</td>
<td>{{s.uname}}</td>
<td>{{s.tel}}</td>
<td>{{s.price |currency:"RMB￥"}}</td>
<td>{{s.city}}</td>
<td>{{s.regdate | date:'MM-dd hh:mm'}}</td>
<td>
<span ng-if="s.state=='未发货'">
<a href="#" ng-click="s.state='已发货'" style="background:darkgrey ;">{{s.state}} </a>
</span>
<span ng-if="s.state=='已发货'" style="background: yellow;">
已发货
</span>
</td>
</tr>

</table>
<form style=" border: 1px solid blue; width: 300px; " ng-show="formShow" >
<h3>新增订单</h3><br>
商品号： <input type="text" ng-model="newId" /><br /><br />
商品名:<input type="text" ng-model="newGname" /><br /><br />
用户名:<input type="text" ng-model="newUname" /><br /><br />
手机号:<input type="text" ng-model="newTel" /><br /><br />
价格为:<input type="text" ng-model="newPrice" /><br /><br />
城市:<select ng-model="newCity">
<option value="">--请选择城市--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="郑州">郑州</option>
<option value="深圳">深圳</option>
</select><br><br>
下单时间:<input type="text" ng-model="newRegdate" /><br /><br />
货物状态：<input type="text" ng-model="newState" /><br /><br />
<div ng-show="divShow">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="sub()" />
</form>
</body>

</html>