<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
text-decoration: none;
}
p button {
margin-left: 550px;
background: red;
color: white;
}
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid black;
}
td button {
background: blue;
color: white;
}
</style>
<script src="../angular-1.5.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("myCtrl", function ($scope) {
$scope.show = true;
$scope.shows = false;
$scope.arr = [{
name: "qq", price: 12.00, number: 1, check: false
}, {
name: "ww", price: 24.00, number: 1, check: false
}, {
name: "ee", price: 48.00, number: 1, check: false
}, {
name: "rr", price: 66.00, number: 1, check: false
}]
//添加商品数量
$scope.add = function (index) {
$scope.arr[index].number++;
}
//减少商品数量
$scope.cut = function (index) {
$scope.arr[index].number--;
if ($scope.arr[index].number == 0) {
var delee = confirm("是否删除该商品?");
if (delee) {
$scope.arr.splice(index, 1);
} else {
$scope.arr[index].number++;
}
}
}
//商品总价
$scope.all = function () {
var sum = 0;
for (var i = 0; i < $scope.arr.length; i++) {
sum += $scope.arr[i].number * $scope.arr[i].price;
}
return sum;
}
//全选
$scope.quanxuan =function (dui) {
if(dui==true){
for (var i = 0; i < $scope.arr.length; i++) {
$scope.arr[i].check=dui
}
}else{
for (var i = 0; i < $scope.arr.length; i++) {
$scope.arr[i].check=dui
}
}
}
//清除购物车
$scope.eliminate = function (dui) {
if (dui == true) {
var delee = confirm("是否清除购物车?");
if (delee) {
$scope.show = false;
$scope.shows = true
} else {
$scope, show = true;
$scope.shows = false
}
}else{
//删除选中的
for (var i = $scope.arr.length-1; i >=0; i--) {
if($scope.arr[i].check==true){
$scope.arr.splice(i, 1);
}
}
}
}
//点击删除按钮
$scope.shanchu=function (index) {
$scope.arr.splice(index, 1);
}
//判断对勾
$scope.dange=function () {
var flag = 0
for (var i = 0; i < $scope.arr.length; i++) {
if($scope.arr[i].check==true){
flag++;
}
}
if(flag==$scope.arr.length){
alert("全部选中")
$scope.dui=true;
}else{
$scope.dui=false;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<div ng-if="show">
<p>
<button ng-click="eliminate(dui)">清除购物车</button>
</p>
<table>
<tr>
<th><input type="checkbox" ng-model="dui" ng-click="quanxuan(dui)"></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>optionn</th>
</tr>
<tr ng-repeat="item in arr">
<td><input type="checkbox" ng-model="item.check" ng-click="dange()"></td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button ng-click="cut($index)">-</button>
<input type="text" ng-model="item.number">
<button ng-click="add($index)">+</button>
</td>
<td>{{item.price*item.number|currency:"￥"}}</td>
<td>
<button ng-click="shanchu($index)">删除</button>
</td>
</tr>
<tr>
<td colspan="6">总价为: <span ng-bind="all()"></span></td>
</tr>
</table>
</div>
<p ng-if="shows">您的购物车为空, <a href="#">去逛商场</a></p>
</body>
</html>
时间： 2024-10-03 22:53:45