Angular购物车模拟

最新推荐文章于 2025-06-13 18:37:39 发布
原创最新推荐文章于 2025-06-13 18:37:39 发布 · 302 阅读
CC 4.0 BY-SA版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>@import "../css/YueKaoTest.css";</style>
    <script type="text/javascript"src="../wrap/Angular-1.4.6.js"></script>
    <script type="text/javascript"src="../wrap/ShoppingCart.js"></script>
    <title></title>
</head>
<body ng-app="myapp" ng-controller="myctr">
     <div class="total">
         <h1>我的购物车</h1>
         <hr/>
         <div class="l">
         <button class="tj" ng-click="adds($index)">
             添加物品
         </button>
         <button class="qc" ng-click="deles($index)">
             清空购物车
         </button>
         <select ng-model="orb">
             <option value="">升序</option>
             <option value="price">降序</option>
         </select>
         </div>
         <table border="1">
             <tr>
                 <td width="60px">
                     <input type="checkbox" ng-model="all" />
                     <span ng-bind="all ? '取消' : '全选'"></span>
                 </td>
                 <td width="90px">ID</td>
                 <td width="90px">物品名</td>
                 <td width="120px">价 格</td>
                 <td width="160px">数量</td>
                 <td width="120px">小计</td>
                 <td width="120px">操作</td>
             </tr>
             <tr ng-repeat="d in data|orderBy:orb">
                 <td width="45px"><input type="checkbox" ng-model="c" ng-checked="all"/></td>
                 <td width="90px">{{$index}}</td>
                 <td width="90px">{{d.uname}}</td>
                 <td width="120px">{{d.price | currency:"￥"}}</td>
                 <td width="160px" ng-model="number">
                     <input type = "button" ng-click = "change($index,-1)" value="-"/>
                     {{d.number}}
                     <input type = "button" ng-click = "change($index,1)" value="+"/>
                 <td width="120px">{{d.price*d.number}}</td>
                 <td width="120px"><button ng-click="mdele($index)" class="number">删除</button ></td>
             </tr>
             <tr ng-show="shows">
                 <td width="45px" colspan="6">总计：{{allprice()}}</td>
             </tr>
         </table>

         <div class="c" ng-show="addshow">
         <div class="t">
             <h4>添加（以下都是必填项）</h4>
             物品名：<input ng-model="gname" type="text" /><br/>
             价 格： <input ng-model="gprice" class="a"type="text" /><br/>
             数 量： <input ng-model="gnumber" class="a"type="text" /><br/>
             <button ng-click="yin($index)" class="adds">添加</button>
         </div>
             </div>
     </div>
<script type="text/javascript">
    var app = angular.module("myapp",[]);
    app.controller("myctr",function($scope){
        $scope.shows=true;
        //添加数据
        $scope.data=data;
        //清空购物车
        $scope.deles=function($index){
            $scope.shows=false;
        $scope.data.splice($index);
            confirm("是否清空购物车");
        }
        //删除数据
        $scope.mdele=function($index){
            $scope.data.splice($index,1);
        }
        //点击加
        $scope.jia=function(){
            $scope.number=number+1
        }
        //总价格的计算
        $scope.allPrices=function(){
            $scope.allprice=0;
            angular.forEach($scope.data,function(d,index,array){
                data.price=data.number*data.price;
                if($scope.c==true){
                    $scope.allprice+=parseInt(d.price);
                }
            })


            return $scope.allprice;
        };
        //添加隐藏与现实
        $scope.addshow=false;
        $scope.adds=function(){
            $scope.addshow=true;
        }

        $scope.yin=function($index){
            $scope.addshow=false;
            if($scope.gname==undefined||$scope.gname==""){
                alert("物品名不能为空！");
                return $scope.addshow=true;
            }
            if(!/^\d+$/.test($scope.gprice)||$scope.gprice==undefined||$scope.gprice==""){
                alert("价格不能为数字 不能为空！");
                return $scope.addshow=true;
            }
            if(!/^\d+$/.test($scope.gnumber)||$scope.gnumber==undefined||$scope.gnumber==""){
                alert("数量不能为数字 不能为空！");
                return $scope.addshow=true;
            }
            $scope.data.splice($index+1,0,{
                uname:$scope.gname,
                price:$scope.gprice,
                number:$scope.gnumber
            });
            $scope.gname="",
            $scope.gprice="",
            $scope.gnumber=""
        };

    });
</script>
</body>
</html>