<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.add,
.id_paixu,
.piliang,
.price_paixu,
.piliang,
.time_paixu {
background: #5CD6FF;
}
span{
background: yellow;
border: solid 1px red;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--
上部界面-----------------------
-->
<input type="button" value="新增订单" class="add" ng-click="xianshi()" />
<input type="button" value="批量删除" class="piliang" ng-click="piliang()" />
<input type="text" placeholder="按商品名称查询" ng-model="name1" />
<input type="text" placeholder="按手机号查询" ng-model="tel1" />
<select ng-change="chang(value)" ng-model="value">
<option>--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select>
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td><input type="checkbox" /></td>
<td>id
<input type="button" value="排序" class="id_paixu" />
</td>
<td>名称</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<input type="button" value="排序" class="price_paixu" /></td>
<td>城市</td>
<td>下单时间<input type="button" value="排序" class="time_paixu" /></td>
<td>状态</td>
</tr>
<tr ng-repeat="g in goods|filter:name1|filter:tel1">
<td><input type="checkbox" ng-checked="g.state" ng-click="chang2(g.id,g.state)" /></td>
<td>{{g.id}}
</td>
<td>{{g.gname}}</td>
<td>{{g.guser}}</td>
<td>{{g.gtel}}</td>
<td>{{g.gprice|currency:"￥："}}</td>
<td>{{g.gcity}}</td>
<td>{{g.gtime|date:"MM-dd hh-mm-ss"}}</td>
<td><input type="button" value="{{(g.send)?'已发货':'未发货'}}" style="background:{{(g.send)?'green':'yellow'}};" ng-click="send(g.id,g.send)" /></td>
</tr>
</table>
<!--
下部界面-----------------------
-->
<div ng-show="isShow">
<input type="button" value="新增订单" />
<fieldset>
<legend>添加订单信息</legend>
商品名:<input type="text" ng-model="name12" /><span class="name_tip" ng-show="name_tip">
商品名不能为空
</span><br> 用户名:
<input type="text" ng-model="user12" /><span class="name_tip" ng-show="user_tip">
用户名不能为空
</span><br> 手机号:
<input type="text" ng-model="tel12" /><span class="name_tip" ng-show="tel_tip">
手机号不能为空
</span><br> 价格:
<input type="text" ng-model="price12" /><span class="name_tip" ng-show="price_tip">
价格不能为空
</span><br> 城市:
<select ng-model="value">
<option>--选择城市---</option>
<option>北京</option>
<option>山东</option>
</select>
<span class="name_tip" ng-show="city_tip">
城市不能为空
</span><br>
<input type="button" value="保存" ng-click="save()" />
</fieldset>
</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope, $http) {
//创建数组
$scope.goods = [{
"id": 1,
"gname": "iphonex",
"guser": "zhangsan",
"gtel": "12345677890",
"gprice": "10000",
"gcity": "北京",
"gtime": "123567755",
"state": false,
"send": false
}, {
"id": 2,
"gname": "笔记本",
"guser": "李四",
"gtel": "324214124",
"gprice": "40000",
"gcity": "上海",
"gtime": "34232422432",
"state": false,
"send": false
}, {
"id": 3,
"gname": "hahah ",
"guser": "zhangsan",
"gtel": "12345677890",
"gprice": "10000",
"gcity": "北京",
"gtime": "123567755",
"state": false,
"send": true
}, {
"id": 4,
"gname": "heheh",
"guser": "zhangsan",
"gtel": "12345677890",
"gprice": "10000",
"gcity": "北京",
"gtime": "123567755",
"state": false,
"send": false
}];
//根据状态，改变按钮的背景色
// $scope.send = function(b) {
// if(!b) {
//
// }
// }
//根据发货状态筛选
$scope.chang = function(b) {
$scope.goods = [{
"id": 1,
"gname": "iphonex",
"guser": "zhangsan",
"gtel": "12345677890",
"gprice": "10000",
"gcity": "北京",
"gtime": "123567755",
"state": false,
"send": false
}, {
"id": 2,
"gname": "笔记本",
"guser": "李四",
"gtel": "324214124",
"gprice": "40000",
"gcity": "上海",
"gtime": "34232422432",
"state": false,
"send": false
}, {
"id": 3,
"gname": "hahah ",
"guser": "zhangsan",
"gtel": "12345677890",
"gprice": "10000",
"gcity": "北京",
"gtime": "123567755",
"state": false,
"send": true
}, {
"id": 4,
"gname": "heheh",
"guser": "zhangsan",
"gtel": "12345677890",
"gprice": "10000",
"gcity": "北京",
"gtime": "123567755",
"state": false,
"send": false
}];
console.log(b)
if(b == "已发货") {
//已返货
var arr = [];
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
if(g.send) {
arr.push(g);
}
}
$scope.goods = arr;
} else if(b == "未发货") {
var arr1 = [];
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
if(!g.send) {
arr1.push(g);
}
}
$scope.goods = arr1;
}
}
//未发货--已发货
$scope.send = function(id, send) {
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
if(g.id == id && send == false) {
g.send = true;
break;
}
}
}
//单机复选框，改变状态
$scope.chang2 = function(id, s) {
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
if(g.id == id) {
g.state = !g.state;
break;
}
}
}
//批量删除
$scope.piliang = function() {
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
if(g.state && g.send) {
$scope.goods.splice(i, 1);
}
}
}
//显示下部
$scope.xianshi = function() {
$scope.isShow = true;
}
$scope.save = function() {
var name123 = $scope.name12;
if(name123 == null || name123 == "") {
$scope.name_tip = true;
return;
}
var g = {
"id": 4,
"gname": $scope.name12,
"guser": $scope.user12,
"gtel": $scope.tel12,
"gprice": $scope.price12,
"gcity": "北京",
"gtime": "123567755",
"state": false,
"send": false
};
$scope.goods.push(g);
$scope.isShow = false;
}
});
</script>
</body>
</html>