终极购物车
Posted 小马哥(马云)
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了终极购物车相关的知识，希望对你有一定的参考价值。
<!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="width: 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>
以上是关于终极购物车的主要内容，如果未能解决你的问题，请参考以下文章