仿淘宝购物车

最新推荐文章于 2018-03-28 20:32:00 发布
JSHeng@
最新推荐文章于 2018-03-28 20:32:00 发布
阅读量528
点赞数
分类专栏： angularjs
本文链接：https://blog.csdn.net/jiaosheng1/article/details/78329042
版权
angularjs 专栏收录该内容
9 篇文章 0 订阅
订阅专栏
<!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>
JSHeng@
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
仿淘宝购物车

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #but{ width:15px; } #btn{ margin-left: 300px;
复制链接

扫一扫
专栏目录