<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://blog.csdn.net/js/angular/angular.js"></script>
</script>
<style type="text/css">
.kuan {
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
.sjh {
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp", []);
var time1 = new Date("2017-12-19 10:00:00");
var time2 = new Date("2017-12-19 12:00:00");
var time3 = new Date("2017-12-19 14:00:00");
var time4 = new Date("2017-12-19 16:00:00");
app.controller("myCtrl", function($scope) {
$scope.shops = [{
"id": 123,
"sname": "iphonex",
"yname": "张三",
"tel": 13716167236,
"price": 8699,
"city": "北京",
"time": time1,
"orderState": true,
"state": false
},
{
"id": 456,
"sname": "iphone6",
"yname": "王红",
"tel": 10086121212,
"price": 5635,
"city": "郑州",
"time": time4,
"orderState": true,
"state": false
},
{
"id": 789,
"sname": "iphone7",
"yname": "赵小龙",
"tel": 13693324137,
"price": 6180,
"city": "北京",
"time": time3,
"orderState": false,
"state": false
},
{
"id": 110,
"sname": "iphone8",
"yname": "赵强",
"tel": 13722335577,
"price": 7190,
"city": "上海",
"time": time2,
"orderState": false,
"state": false
}
];
//更改状态
$scope.changeOrderState = function(shop) {
shop.orderState = true;
}
//批量删除已发货商品
$scope.deleteSel = function() {
var selArr = [];
for(index in $scope.shops) {
if($scope.shops[index].state) { //多选框被选中的商品
if($scope.shops[index].orderState) { //多选框被选中的已发货商品
selArr.push($scope.shops[index]);
}
}
}
if(selArr.length > 0) {
for(index1 in selArr) {
for(index2 in $scope.shops) {
if(selArr[index1] == $scope.shops[index2]) {
$scope.shops.splice(index2, 1);
}
}
}
}else{
alert("先选择被选中的已发货商品");
}
}
//点击列明进行排序
$scope.flag = "";
$scope.column = "id";
$scope.orderColumn = function(column){
//alert(column);
$scope.column = column;
if($scope.flag == ""){
$scope.flag = "-";
}else{
$scope.flag = "";
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品订单信息管理</h3>
<table border="1" cellspacing="0" cellpadding="10">
<input type="button" value="新增订单" />
<input type="button" value="批量删除" ng-click="deleteSel()" />
<input type="text" placeholder="按照商品名称查询..." class="kuan" ng-model="search" />
<input type="text" placeholder="按照手机号查询..." class="sjh" ng-model="telNum" />
<select style="margin-left: 30px;" ng-model="orderStateSel">
<option value="">--按照状态查询--</option>
<option value="true">--已发货--</option>
<option value="false">--未发货--</option>
</select><br /><br />
<tr>
<th><input type="checkbox" ng-click="selectFun()" ng-model="selsectAll" /></th>
<th>id <input type="submit" value="排序" ng-click="pid(shop.id)" /></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<input type="submit" value="排序" </th>
<th>城市</th>
<th>下单时间：
<input type="button" ng-click="orderColumn('time')" value="排序" />
</th>
<th>状态</th>
</tr>
<tr ng-repeat="shop in shops | filter:{sname:search,tel:telNum,orderState:orderStateSel} | orderBy:flag+column">
<td><input type="checkbox" ng-model="shop.state" /></td>
<td>{{shop.id}}</td>
<td>{{shop.sname}}</td>
<td>{{shop.yname}}</td>
<td>{{shop.tel}}</td>
<td>{{shop.price | currency:"￥："}}</td>
<td>{{shop.city}}</td>
<td>{{shop.time | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<button disabled="disabled" style="background: green; border: none;" ng-show="shop.orderState">已发货</button>
<button style="background: yellow; border: none;" ng-show="!shop.orderState" ng-click="changeOrderState(shop)">未发货</button>
</td>
</tr>
</table>
<fieldset id="" style="width: 500px;">
<legend>添加商品列表</legend>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>id</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>商品名</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>城市</td>
<td><input style="border:1px solid red;" type="text" /></td>
</tr>
<tr>
<td>下单时间</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" /></td>
</tr>
</table>
</fieldset>
</center>
</body>
