<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<script src="angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("myCtrl", function ($scope) {
/*模拟三条数据*/
$scope.items = [
{"name": "qq", "price": 12, "number": 3,"number2":3},
{"name": "wx", "price": 23, "number": 2,"number2":2},
{"name": "wx", "price": 99, "number": 5,"number2":5},
{"name": "嘿嘿", "price": 66, "number": 3,"number2":3},
]
/*计算总价的方法*/
$scope.sum = function () {
$scope.sumMoney = 0;
for (var i = 0; i < $scope.items.length; i++) {
$scope.sumMoney += $scope.items[i].price * $scope.items[i].number;
}
return $scope.sumMoney;
}
/*删除单条目商品的监听事件*/
$scope.del_btn = function ($index) {
/*根据索引值进行删除数据*/
if (confirm("您是否将该商品移除购物车吗？")) {
$scope.items.splice($index, 1);
} else {
// 取消删除的操作
}
}
/*减少number数量的按钮监听事件*/
$scope.jian = function ($index) {
// 对点击的索引进行移除指定的number数量
// 首先判断<0的时候停止减少
if ($scope.items[$index].number == 1) {
if(confirm("亲，是否删除该商品？")){
// 如果点击确定 则删除该条目
$scope.items.splice($index,1);
}else{
// 取消时 商品数量恢复原来的数量
$scope.items[$index].number = $scope.items[$index].number2;
}
} else {
// number数量大于0 即可减少
$scope.items[$index].number--;
}
};
/*增加number数量的按钮监听事件*/
$scope.add = function ($index) {
// 每次单击 增加number数量
$scope.items[$index].number++;
};
/*全选多选框的监听事件*/
$scope.bigCheck = function (bigisno) {
// 如果点击了全选按钮 则全选全部的check按钮 取消则反选
$scope.isno = ! $scope.isno;
};
/*清空购物车的监听事件*/
$scope.delAll = function () {
// 首先判断全选框是否选中
if($scope.bigcheck){
// 给用户一个温馨提示 判断是否选中
if(confirm("您确定要清空购物车吗？")){
// 如果判断为全选时 进行清空购物车
$scope.items.splice(0,$scope.items.length);
// 显示购物车为空 同时隐藏其他布局
$scope.isnide = true;
}
}else{
// 如果选中了一项以上，则根据选中的进行清空
if($scope.arr != ""){
for(var i = 0 ; i < $scope.items.length; i++){
for (var j = 0 ; j < $scope.arr.length; j++){
if($scope.items[i].name == $scope.arr[j]){
// 根据arr数组里保存的名字 进行遍历删除指定条目的数据
$scope.items.splice(i,1);
}
}
}
}else{
alert("亲，至少选择一项！");
}
}
};
$scope.tab_ishide = true;
/*监听小复选框的监听事件*/
$scope.arr = [];
$scope.isno = false;
$scope.smallcheck = function (isno,index,name) {
// 首先判断是否选中
if(isno){
$scope.arr.push(name);
}else{
// 取消选中则移除指定索引的数据
for (var i = 0 ; i < $scope.arr.length; i++){
if($scope.arr[i] == name){
$scope.arr.splice(i,1);
}
}
}
}
});
</script>
</head>
<body ng-app="app" ng-controller="myCtrl">
<div>
<h1>我的购物车</h1>
<hr>
<button class="btn1" ng-click="delAll()">清空购物车</button>
<table>
<thead>
<tr>
<th><input type="checkbox" ng-model="bigcheck" ng-click="bigCheck()"></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><input type="checkbox" ng-model="isno" ng-click="smallcheck(isno,$index,item.name)"></td>
<td>{{item.name}}</td>
<td>{{item.price| currency:'￥'}}</td>
<td>
<button class="number_button" ng-click="jian($index)">-</button>
<span><input type="number" ng-model="item.number" style=" 30px"></span>
<button class="number_button" ng-click="add($index)">+</button>
</td>
<td>{{item.number * item.price | currency:'￥'}}</td>
<td>
<button ng-click="del_btn($index)" class="small_button">删除</button>
</td>
</tr>
<tr>
<td colspan="6">总价为：<span ng-bind="sum() | currency:'￥'"></span></td>
</tr>
</tbody>
</table>
</div>
<div ng-if="isnide">
<p>您的购物车为空，<a href="#">去逛逛</a></p>
</div>
</body>
</html>