<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>月考</title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jQuery-2.1.0/jquery-2.1.0.js" ></script>
<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("myCtril",function($scope){
$scope.shops=[{
id:2001,
spname:"iphonex",
name:"张三",
tel:13585565588,
jg:8699.00,
cs:"北京",
tame:time1,
"orderState": true,
"state": false
},
{id:3006,
spname:"iphone6",
name:"王红",
tel:13585560588,
jg:5635.00,
cs:"北京",
tame:time4,
"orderState": true,
"state": false
},
{id:2001,
spname:"iphonex",
name:"张三",
tel:13585565588,
jg:8699.00,
cs:"北京",
tame:time2,
"orderState": false,
"state": false
},
{id:2001,
spname:"iphonex",
name:"张三",
tel:13585565588,
jg:8699.00,
cs:"北京",
tame:time3,
"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 = "tame";
$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="myCtril">
<button style="background: aquamarine">新增订单</button>
<button style="background: aquamarine" ng-click="deleteSel()" >批量删除</button>
<input type="text" placeholder="按商品名称查询" ng-model="scx"/>
<input type="text" placeholder="按手机号查询" ng-model="sjcx"/>
<select ng-model="orderStateSel">
<option value="">**按状态查询**</option>
<option value="true" >已发送</option>
<option value="false">未发送</option>
</select>
<br><br>
<table border="1" cellpadding="0" cellspacing="0">
<thead >
<tr style="background: darkgrey;">
<th><input type="checkbox"></th>
<th>id <button style="background: aquamarine;">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button style="background: aquamarine;">排序</button></th>
<th>城市</th>
<th>下单时间<button style="background: aquamarine;" ng-click="orderColumn('time')">排序</button></th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops |filter:{spname:scx} | filter:{tel:sjcx} | filter:{orderState:orderStateSel} | orderBy:flag+column">
<td><input type="checkbox" ng-model="shop.state"></td>
<td>{{shop.id}}</td>
<td>{{shop.spname}}</td>
<td>{{shop.name}}</td>
<td>{{shop.tel}}</td>
<td>{{shop.jg | currency:"￥："}}</td>
<td>{{shop.cs}}</td>
<td>{{shop.tame | 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>
</tbody>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>月考</title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jQuery-2.1.0/jquery-2.1.0.js" ></script>
<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("myCtril",function($scope){
$scope.shops=[{
id:2001,
spname:"iphonex",
name:"张三",
tel:13585565588,
jg:8699.00,
cs:"北京",
tame:time1,
"orderState": true,
"state": false
},
{id:3006,
spname:"iphone6",
name:"王红",
tel:13585560588,
jg:5635.00,
cs:"北京",
tame:time4,
"orderState": true,
"state": false
},
{id:2001,
spname:"iphonex",
name:"张三",
tel:13585565588,
jg:8699.00,
cs:"北京",
tame:time2,
"orderState": false,
"state": false
},
{id:2001,
spname:"iphonex",
name:"张三",
tel:13585565588,
jg:8699.00,
cs:"北京",
tame:time3,
"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 = "tame";
$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="myCtril">
<button style="background: aquamarine">新增订单</button>
<button style="background: aquamarine" ng-click="deleteSel()" >批量删除</button>
<input type="text" placeholder="按商品名称查询" ng-model="scx"/>
<input type="text" placeholder="按手机号查询" ng-model="sjcx"/>
<select ng-model="orderStateSel">
<option value="">**按状态查询**</option>
<option value="true" >已发送</option>
<option value="false">未发送</option>
</select>
<br><br>
<table border="1" cellpadding="0" cellspacing="0">
<thead >
<tr style="background: darkgrey;">
<th><input type="checkbox"></th>
<th>id <button style="background: aquamarine;">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button style="background: aquamarine;">排序</button></th>
<th>城市</th>
<th>下单时间<button style="background: aquamarine;" ng-click="orderColumn('time')">排序</button></th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops |filter:{spname:scx} | filter:{tel:sjcx} | filter:{orderState:orderStateSel} | orderBy:flag+column">
<td><input type="checkbox" ng-model="shop.state"></td>
<td>{{shop.id}}</td>
<td>{{shop.spname}}</td>
<td>{{shop.name}}</td>
<td>{{shop.tel}}</td>
<td>{{shop.jg | currency:"￥："}}</td>
<td>{{shop.cs}}</td>
<td>{{shop.tame | 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>
</tbody>
</table>
</body>
</html>