大白兔发货

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<style type="text/css">

</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div>
<input type="button" id="" value="新增订单" ng-click="showAdd=!showAdd"/>
<input type="button" id="" value="批量删除" ng-click="plsc()"/>
<input type="text" placeholder="按商品名称查询" ng-model="chagname"/>
<input type="text" placeholder="按手机查询" ng-model="chatel"/>
<select ng-model="chastate">
<option value="">请选择</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
</div>
<table border="1px" cellspacing="0" cellpadding="0" style="width: 60%;">
<tr>
<th><input type="checkbox" ng-model="checkall"/></th>
<th>id<input type="button" value="^" ng-click="paiid()"></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<input type="button" value="^" ng-click="paiprice()"/></th>
<th>城市</th>
<th>下单时间<input type="button" value="^" ng-click="paitime()"/></th>
<th>状态</th>
</tr>
<tr ng-repeat="x in dds|filter:{gname:chagname,tel:chatel,state:chastate}|orderBy:px">
<td><input type="checkbox" value="{{x.id}}" ng-model="checkall"/></td>
<td>{{x.id}}</td>
<td>{{x.gname}}</td>
<td>{{x.uname}}</td>
<td>{{x.tel}}</td>
<td>{{x.price}}</td>
<td>{{x.city}}</td>
<td>{{x.regdate}}</td>
<td>
<span ng-show="x.state=='已发货'" style="background-color: chartreuse;">{{x.state}}</span>
<input ng-show="x.state=='未发货'" style="background-color: yellow;" type="button" id="" value="{{x.state}}" ng-click="dstate(x.id)"/>
</td>

</tr>
</table>

<div ng-show="showAdd">
<ul style="list-style: none;">
<li>id:  <input type="text" id="" value="" ng-model="aid"/></li><span ng-show="showid" style="background-color: yellow;">id不能为空</span>
<li>商品名:<input type="text" id="" value="" ng-model="agname"/></li><span ng-show="showgname" style="background-color: yellow;">商品名不能为空</span>
<li>用户名:<input type="text" id="" value="" ng-model="auname"/></li><span ng-show="showuname" style="background-color: yellow;">用户名不能为空</span>
<li>手机号:<input type="text" id="" value="" ng-model="atel"/></li><span ng-show="showtel" style="background-color: yellow;">手机号不能为空</span>
<li>价格: <input type="text" id="" value="" ng-model="aprice"/></li><span ng-show="showprice" style="background-color: yellow;">价格不能为空</span>
<li><input type="button" id="" value="添加" ng-click="addDds()"/></li>
</ul>
</div>

</center>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){

var id=true;
var price=true;
var regdate=true;

$scope.showAdd=false;
$scope.showid=false;
$scope.showgname=false;
$scope.showuname=false;
$scope.showtel=false;
$scope.showprice=false;

$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.then(function(response){
$scope.dds=response.data;
});

$scope.paiid=function(){
if(id){
$scope.px="id";
id=false;
}else{
$scope.px="-id";
id=true;
}
}
$scope.paiprice=function(){
if(price){
$scope.px="price";
price=false;
}else{
$scope.px="-price";
price=true;
}
}

$scope.paitime=function(){
if(regdate){
$scope.px="regdate";
regdate=false;
}else{
$scope.px="-regdate";
regdate=true;
}
}

$scope.dstate=function(id){
for (var i = 0; i < $scope.dds.length; i++) {
if ($scope.dds[i].id==id) {
$scope.dds[i].state="已发货";
}

}
}

$scope.plsc=function(){
var cbs=$("input:checked");
cbs.each(function(){
for (var i = 0; i < $scope.dds.length; i++) {
if ($(this).val()==$scope.dds[i].id) {
$scope.dds.splice(i,1);
break;
}
}
});
}

$scope.addDds=function(){
var newDds={};
newDds.id=$scope.aid;
newDds.gname=$scope.agname;
newDds.uname=$scope.auname;
newDds.price=$scope.aprice;
newDds.tel=$scope.atel;

if (newDds.id=="") {
$scope.showid=true;
// alert("b")
// break;
}

$scope.dds.push(newDds);
$scope.showAdd=false;

$scope.aid="";
$scope.agname="";
$scope.auname="";
$scope.aprice="";
$scope.atel="";

};

});
</script>
</body>
</html>

猜你喜欢