<!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>