<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#da{
width: 600px;
height: 1000px;
}
table{
width: 600px;
}
select{
background: #999999;
}
#xiao{
width: 400px;
height: 25px;
margin-top: 20px;
float: left;
}
#yi{
width: 150px;
height: 25px;
background: #00FF66;
float: left;
}
#er{
width: 150px;
height: 25px;
background: #00FF66;
float: right;
}
#san{
width: 150px;
height: 25px;
float: right;
margin-top: 20px;
}
.css1{
background-color:#00FF99;
}
.css2{
background: #FF3399;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/lib/js/angular/angular.js" ></script>
<script>
var app = angular.module("linrenjiang",[]);
app.controller("conl",function($scope){
$scope.selname = "";
$scope.px = '-num*s.price';
$scope.sj = true;
$scope.stus = [{
id : 001,
name: "手机",
num : 3,
price : 1000
},{
id : 002,
name: "电脑",
num : 3,
price : 2000
},{
id : 003,
name: "电视",
num : 6,
price : 500
}];
$scope.add = function(){
$scope.stus.push({
id : 004,
name: "冰箱",
num : 2,
price : 15000
});
}
$scope.del = function(na){
if(window.confirm("你确定删除" + na + "吗")) {
for(index in $scope.stus) {
if(na == $scope.stus[index].name) {
$scope.stus.splice(index, 1);
}
}
}
}
//总价格
$scope.prices = function() {
var p = 0;
for(var x = 0; x < $scope.stus.length; x++) {
p += $scope.stus[x].num * $scope.stus[x].price;
}
return p;
}
//总数量
$scope.nums = function() {
var p = 0;
for(var x = 0; x < $scope.stus.length; x++) {
p += $scope.stus[x].num;
}
return p;
}
//清空购物车
$scope.delAll=function(){
$scope.stus.splice(0);
}
});
</script>
</head>
<body ng-app="linrenjiang" ng-controller="conl">
<center>
<div id="da">
<h2 style="background: #D7FF86; width: 200px;">我的购物车详情</h2>
<button ng-click="add()" style="float: left; width: 80px; background: red;">添加</button>
<input type="text" ng-model="selname" style="float: right; width: 250px; height: 25px; background: url(img/s.PNG)"/>
<br />
<table cellpadding="0" cellspacing="0" border="1px">
<thead>
<tr style="background: #999999;">
<th ng-click="px = 'id';sj=!sj">商品编号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th ng-click="px = 'num*s.price'; sj=!sj">价格小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in stus | filter:{name:selname} | orderBy:px:sj" class="{{$even ? 'css1' : 'css2' }}" align="center">
<td>{{s.id}}</td>
<td>
<span ng-click="f=true">{{s.name}}</span>
<span ng-show="f">
<input ng-model="s.name" /><button ng-click="f=fales">保存</button>
</span>
</td>
<td><input type="number" ng-model="s.num" min="1"/></td>
<td>{{s.price}}</td>
<td>{{s.num*s.price}}</td>
<td>
<button ng-click="del(s.name)" style="background: yellow;">移除</button>
</td>
</tr>
</tbody>
</table>
<br />
<div style="width: 600px; height: 30px;">
<div id="xiao">
<div id="yi">
商品总数:{{nums()}}
</div>
<div id="er">
商品总价:{{prices()}}
</div>
</div>
<div id="san">
<button ng-click="delAll()" style="background: yellow;">清空购物车</button>
</div>
</div>
</div>
</center>
</body>
</html>
购物车 2
最新推荐文章于 2021-02-23 18:11:09 发布