购物车..

最新推荐文章于 2024-03-18 19:23:11 发布

原创最新推荐文章于 2024-03-18 19:23:11 发布 · 184 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
<script>
angular.module("mjb", []).controller("democ", function($scope) {
$scope.stus = [{
ck:false,
names: '奔驰',
prices: 50,
num: 4
},
{
ck:false,
names: '保时捷',
prices: 120,
num: 3
},
{
ck:false,
names: '宝马',
prices: 70,
num: 2
}
];

$scope.tableshow = false;
$scope.tbshow = true;
$scope.gh=true;
//添加的方法
$scope.add = function() {
var names = $scope.names;
var prices = $scope.prices;
var num = $scope.num;
$scope.tableshow = false;
$scope.stus.push({
names: names,
prices: prices,
num: num
})
}
$scope.quxiao = function() {
$scope.tableshow = false;
}
//实现数量加减的操作
$scope.count = function(n, name) {
var i=0;
if($scope.stus[i].num==1&&n==-1) {
var c = confirm("确定删除")
if(c){
$scope.stus.splice(i, 1);
}

}else{
for(var j=0;j<$scope.stus.length;j++){
if($scope.stus[j].names==name){
i=j;//把j赋值给i
}
}
$scope.stus[i].num = $scope.stus[i].num + n;
}

}

$scope.sum = function() {
var count = 0;
for(var i in $scope.stus) {
count = count + $scope.stus[i].prices * $scope.stus[i].num;
}
return count;
}
$scope.del=function(i){
$scope.stus.splice(i,1);
}
$scope.ckAll = function() {
for(var i = 0; i < $scope.stus.length; i++) {
$scope.stus[i].ck = $scope.flag;
}
}
//批量删除
$scope.delAll = function() {
var count = 0;

//遍历数组
for(var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].ck) {
count++;
$scope.stus.splice(i, 1);
i--;
}
}
if($scope.stus.length==0) {
$scope.tbshow = false;
$scope.gh=false;

}
}

});
</script>
<style>

</style>
</head>

<body ng-app="mjb" ng-controller="democ">
<h2>我的购物车</h2>

<input type="text" placeholder="输入关键字进行搜索....." ng-model="qnames"/>
<select style="height: 23px;margin-left: 400px;" ng-model="paixu">
<option value="">按数量排序</option>
<option value="+num">按数量正序排序</option>
<option value="-num">按数量倒序排序</option>
</select>
<input type="button" style="background: greenyellow;" value="入库" ng-click="tableshow=true" /><br/>
<input type="button" style="background: red;margin-left: 660px;margin-top: 20px;" ng-click="delAll()" value="清空购物车" />
<table style="width: 750px;" border="1px" ng-show="tbshow">
<tr align="center">
<td><input type="checkbox" ng-click="ckAll()" ng-model="flag"/> </td>
<td>name</td>
<td>price</td>
<td>number</td>
<td>totalPrice</td>
<td>option</td>
</tr>
<tr align="center" ng-repeat="s in stus|filter:{names:qnames}|orderBy:paixu">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.names}}</td>
<td>{{s.prices|currency:'¥'}}</td>
<td>
<button style="background: cyan;" ng-click="count(+1,s.names)">+</button>
<input style="width: 30px;" ng-model="s.num" />
<button style="background: cyan;" ng-click="count(-1,s.names)">-</button>
</td>
<td>{{s.prices*s.num|currency:'¥'}}</td>
<td><button style="background: cyan;" ng-click="del($index)">删除</button> </td>
</tr>
<tr>
<td colspan="6">总价格:{{sum()|currency:'¥'}}</td>
</tr>
</table>
<table ng-show="tableshow">
<tr>
<td>name:</td>
<td><input type="text" ng-model="names" /></td>
</tr>
<tr>
<td>price:</td>
<td><input type="text" ng-model="prices" /></td>
</tr>
<tr>
<td>number:</td>
<td><input type="text" ng-model="num" /></td>
</tr>
<tr>
<td><input type="button" ng-click="add()" value="保存" /> </td>
<td><input type="button" ng-click="quxiao()" value="取消" /></td>

</tr>

</table>
<h1 ng-hide="gh">购物车为空请继续购物</h1>
</body>

</html>