<!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/angular.min.js" ></script> | |
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script> | |
<script> | |
var app=angular.module("myApp",[]); | |
app.controller("myCtrl",function($scope,$http){ | |
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").success(function(aa){ | |
$scope.dates=aa; | |
}) | |
//全选 | |
$scope.qx=function(){ | |
for (var i = 0; i < $scope.dates.length; i++) { | |
$scope.dates[i].c=$scope.ck; | |
} | |
} | |
//删除 | |
$scope.scbh=function(index){ | |
if ($scope.dates[index].state=='已发货') { | |
$scope.dates.splice(index,1); | |
index--; | |
} else{ | |
alert("未发货的商品不能删除"); | |
} | |
} | |
//修改 | |
$scope.xg=function(d){ | |
var xgwc=prompt("修改的内容",d.price); | |
d.price=xgwc; | |
} | |
//商品总价 | |
$scope.sumhe=function(){ | |
sun=0; | |
for (var i = 0; i < $scope.dates.length; i++) { | |
sun=sun+($scope.o*$scope.dates[i].price); | |
} | |
return sun; |
|
} | |
//添加 | |
$scope.xzbc=function(){ | |
var sj=new Date(); | |
if ($scope.idd==null|$scope.spm==null|$scope.yhm==null|$scope.dh==null|$scope.jg==null|$scope.ss==null) { | |
$scope.tis=true; | |
}else{ | |
if ($scope.idd==""|$scope.spm==""|$scope.yhm==""|$scope.dh==""|$scope.jg==""|$scope.ss=="") { | |
$scope.tis=true; | |
}else{ | |
var stu={id:$scope.idd,gname:$scope.spm,uname:$scope.yhm,tel:$scope.dh,price:$scope.jg,city:$scope.ss,regdate:sj,state:'未发货'} | |
$scope.dates.push(stu); | |
$scope.flag=false; | |
$scope.tis=false; | |
} | |
} | |
} | |
//批量删除 | |
$scope.plsc=function(){ | |
for (var i = 0; i < $scope.dates.length; i++) { | |
if ($scope.dates[i].c) { | |
if ($scope.dates[i].state=='已发货') { | |
$scope.dates.splice(i,1); | |
i--; | |
} else{ | |
alert("未发货的商品不能删除"); | |
} | |
} | |
} | |
} | |
}) | |
</script> | |
<style> | |
tr:nth-child(2n+1){ | |
background: thistle; | |
} | |
tr:nth-child(2n){ | |
background: cyan; | |
} | |
</style> | |
</head> | |
<body ng-app="myApp" ng-controller="myCtrl" ng-init="o=1"> | |
<button ng-click="flag=true">新增订单</button> | |
<button ng-click="plsc()">批量删除</button> | |
<input ng-model="sname" placeholder="请输入商品名" /> | |
<input ng-model="stel" placeholder="请输入手机号" /> | |
<select ng-model="sss"> | |
<option value="">请选择状态</option> | |
<option>已发货</option> | |
<option>未发货</option> | |
</select> | |
<table border="1"> | |
<tr> | |
<td><input type="checkbox" ng-model="ck" ng-click="qx()" /></td> | |
<td>id<button ng-click="px='id';f=!f">排序</button></td> | |
<td>商品名</td> | |
<td>用户名</td> | |
<td>电话</td> | |
<td>价格<button ng-click="px='price';f=!f">排序</button></td> | |
<td>城市</td> | |
<td>下单时间<button ng-click="px='regdate';f=!f">排序</button></td> | |
<td>状态</td> | |
<td>操作</td> | |
<td>数量</td> | |
<td>小计</td> | |
</tr> | |
<tr ng-repeat="d in dates|orderBy:px:f|filter:{state:sss,gname:sname,tel:stel}"> | |
<td><input type="checkbox" ng-model="d.c" /></td> | |
<td>{{d.id}}</td> | |
<td>{{d.gname}}</td> | |
<td>{{d.uname}}</td> | |
<td>{{d.tel}}</td> | |
<td>{{d.price|currency:'¥:'}}</td> | |
<td>{{d.city}}</td> | |
<td>{{d.regdate|date:'MM-dd hh:mm:ss'}}</td> | |
<td> | |
<span style="background: tomato;" ng-show="d.state=='未发货'"><a href="#" ng-click="d.state='已发货'">未发货</a></span> | |
<span style="background: yellowgreen;" ng-show="d.state=='已发货'">已发货</span> | |
</td> | |
<td> | |
<button ng-click="xg(d)">修改</button> | |
<button ng-click="scbh($index)">删除</button> | |
</td> | |
<td><button ng-click="o=o+1">+</button>{{o}}<button ng-click="o=o-1">-</button></td> | |
<td>{{d.price*o}}</td> | |
</tr> | |
</table> | |
<button>商品总价{{sumhe()}}</button> | |
<form ng-show="flag"> | |
<label> | |
id<input ng-model="idd" /><span ng-show="tis">不能为空</span> | |
</label><br /> | |
<label> | |
商品名<input ng-model="spm" /><span ng-show="tis">不能为空</span> | |
</label><br /> | |
<label> | |
用户名<input ng-model="yhm" /><span ng-show="tis">不能为空</span> | |
</label><br /> | |
<label> | |
电话<input ng-model="dh" /><span ng-show="tis">不能为空</span> | |
</label><br /> | |
<label> | |
价格<input ng-model="jg" /><span ng-show="tis">不能为空</span> | |
</label><br /> | |
<label> | |
城市<select ng-model="ss"> | |
<option value="">请选择城市</option> | |
<option>北京</option> | |
<option>上海</option> | |
<option>郑州</option> | |
</select><span ng-show="tis">不能为空</span> | |
</label><br /> | |
<button ng-click="xzbc()">保存</button> | |
</form> | |
</body> | |
</html> | |
Angular Js 全购物车代码
猜你喜欢
转载自blog.csdn.net/qq_41699439/article/details/79733719
今日推荐
周排行