仿淘宝购物车

来源：互联网发布：网络扫描器是什么编辑：程序博客网时间：2024/04/28 08:17
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #but{            width:30px;        }        #btn{            margin-left: 300px;        }        #ton{            margin-left: 5px;        }    </style>    <script src="angular.js"></script>    <script>        var app = angular.module("myApp",[]);        app.controller("myCtrl",function ($scope) {            $scope.users = [                {name: "qq", price: 12.00, number: 2, totaprice: 25.80, state: false},                {name: "wx", price: 23.90, number: 1, totaprice: 23.90, state: false},                {name: "wx", price: 99.90, number: 1, totaprice: 99.90, state: false}            ];            //改变购买数量          $scope.change=function(index){                if($scope.users[index].number>=1){                }else{                    $scope.users[index].number=1;                }            };            //减少            $scope.reduce= function (index) {                if($scope.users[index].number>1){                    $scope.users[index].number--;                }else{                    $scope.remove(index);                }            };            //增加            $scope.add=function(index){                $scope.users[index].number++;            };            //购买总数量函数            $scope.numAll = function(){                var numAlls = 0                for(var i = 0 ; i <$scope.users.length;i++ ){                    numAlls += $scope.users[i].number;                }                return numAlls;            }            /*计算总价格*/            $scope.allsum=function () {                var allPrice=0;                for(var i=0;i<$scope.users.length;i++){                    allPrice+=$scope.users[i].price*$scope.users[i].number;                }                return allPrice;            };            //全选方法            $scope.selectAll = false;            $scope.selectAllFun = function () {                if ($scope.selectAll) {                    for (index in $scope.users) {                        $scope.users[index].state = true;                    }                } else {                    for (index in $scope.users) {                        $scope.users[index].state = false;                    }                }            }            //检测是否全选            $scope.checkSelect = function (index) {                var temp = 0;                if ($scope.users[index].state == true) {                    temp++;                } else {                    temp--;                }                if (temp == $scope.users.length) {                    $scope.selectAll = true;                } else {                    $scope.selectAll = false;                }                var haha = false;                for (i in $scope.users) {                    if ($scope.users[i].state == true) {                    } else {                        haha = true;                    }                }                if (haha) {                    $scope.selectAll = false;                } else {                    $scope.selectAll = true;                }            }            //批量删除            $scope.deleteSel = function () {                var userNames = [];                for (index in $scope.users) {                    if ($scope.users[index].state == true) {                        userNames.push($scope.users[index].name);                    }                }                if (userNames.length > 0) {                    if (confirm("是否删除选中项？")) {                        for (i in userNames) {                            var name = userNames[i];                            for (i2 in $scope.users) {                                if ($scope.users[i2].name == name) {                                    $scope.users.splice(i2, 1);                                }                            }                        }                    }                } else {                    alert("请选择删除的项")                }            }            //删除单个购物车内容            $scope.remove = function (index) {                if (confirm("确定要删除此项嘛?")) {                    $scope.users.splice(index, 1);                }            };            /*清空购物车*/            $scope.alldel=function () {                if($scope.users.length==0){                    alert("您的购物车已空");                }else{                    if (confirm("确定清空购物车?"))                    $scope.users=[];                }            }            //判断数据源的长度            $scope.getSize = function(){                if($scope.users.length > 0 ){                    return false;                }else{                    return true;                }            }        });    </script></head><body ng-app="myApp" ng-controller="myCtrl"><center>   <h3>我的购物车</h3>   <div id="btn">       <input ng-click="deleteSel()" type="button" value="批量删除" style="background: #D9534F"/>       <input ng-click="alldel()" type="button" value="清空购物车" style="background: #D9534F"  id="ton"/>   </div>   <div >       <table border="1" cellspacing="1" cellpadding="10" ng-hide="getSize()">           <thead>           <tr>               <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>               <th>name</th>               <th>price</th>               <th>number</th>               <th>totaIPrice</th>               <th>option</th>           </tr>           </thead>           <tbody>           <tr ng-repeat="user in users">               <td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td>               <td>{{user.name}}</td>               <td>{{user.price|currency:"￥:"}}</td>               <td><button ng-click="reduce($index)" style="background: #337AB7">-</button>                   <input type="number" id="but" placeholder="请输入大于0的数" ng-model="user.number" ng-change="change($index)">                   <button ng-click="add($index)" style="background: #337AB7">+</button> </td>               <td>{{user.price*user.number|currency:"￥:"}}</td>               <td><button ng-click="remove($index)" class="btn" style="background: #337AB7">删除</button> </td>           </tr>           <tr>               <td colspan="6">                   总数量:<span ng-bind="numAll()"></span><br>                   总价为:<span ng-bind="allsum()|currency:'￥:'"></span>               </td>           </tr>           </tbody>       </table><br><br><br><br><br><br>       <span ng-show="getSize()">您的购物车为空，请先逛<a href="https://www.taobao.com/">购物车</a></span>   </div></center></body></html>
阅读全文
0 0