表格5：《购物车：输入框 + Button类型 + 点击加减 + 总价 + 总数 + 清空购物车》

最新推荐文章于 2020-06-07 16:59:17 发布

xiaoniba987

最新推荐文章于 2020-06-07 16:59:17 发布

阅读量311

点赞数

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>第三周周考</title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           #btn1{
               float: right;
               background-color: red;
               border: 0;
               height: 30px;
           }
           #div1{
               width: 60%;
           }
           table{
               width: 100%;
               margin-top: 50px;
               text-align: center;
           }
           thead{
                background: gray;
            }
            tbody tr:nth-child(even){
                background-color: deeppink;
            }
            tbody tr:nth-child(odd){
                background-color: green;
            }
       </style>
       </head>
   <body ng-app="myapp" ng-controller="myctrl">

       <h1>我的购物车</h1>
       <div id="div0" ng-show="gouwuche_">
       <hr />
       <div id="div1">
       <input type="button" name="" id="btn1" value="清空购物车" ng-click="dell()" />
       <table border="1" cellspacing="0" cellpadding="0">
           <thead>
               <tr>
                   <th><input type="checkbox" name="" id="" value="" ng-model="check_"/></th>
                   <th>名称</th>
                   <th>单价</th>
                   <th>数量</th>
                   <th>总价</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="x in addll">
                   <td><input type="checkbox" name="" id="" value=""ng-model="check_" /></td>
                   <td>{{x.name}}</td>
                   <td>{{x.price|currency:"RMB ￥"}}</td>
                   <td> <input type="button" name="" id="" value="-" ng-click="jian($index)" />
                         <input type="text" name="" id="" value="x.number1" ng-model="x.number1"/>
                         <input type="button" name="" id="" value="+" ng-click="jia($index)"/>
                   </td>
                   <td>{{x.price*x.number1|currency:"RMB ￥"}}</td>
                   <td><input type="button" name="" id="" value="删除" ng-click="del_(x.name)"/></td>
                   
               </tr>
           </tbody>
       </table>
       <span>总价为：RMB ￥{{addTao()}}</span>     <span>总数为：{{addTao1()}}</span>
       </div>
       </div>
       <div id="div2" ng-show="dieryemian">
           <span>我的购物车为空，<a href="#">去逛商场</a></span>
       </div>
       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){
               $scope.dieryemian=false;
               $scope.gouwuche_=true;
               //定义集合
               $scope.addll=[
               {name:"茉莉花茶",price:45,number1:2,zongjia:90},
               {name:"南京雨花茶",price:75,number1:1,zongjia:75},
               {name:"安吉白茶",price:100,number1:2,zongjia:200},
               {name:"一级龙井茶",price:45,number1:1,zongjia:45}];
               //点击清空购物车
               $scope.dell=function(){
                   $scope.dieryemian=true;
                     $scope.gouwuche_=false;
               }
               //点击删除一行
               $scope.del_=function(name_){
                   for (var i = 0; i < $scope.addll.length; i++) {
                        if ($scope.addll[i].name==name_) {
                           $scope.addll.splice(i,1);
                           break;
                        }
                   }
               }
               //点击减号
                  var abc=0;
               $scope.jia=function(index){
                   $scope.addll[index].number1++;

               }
               //点击减号
               $scope.jian=function(index_){
                   abc++;
                   $scope.addll[index_].number1--;
                   if ($scope.addll[index_].number1<1) {
                       var c=confirm("确定要删除么？");
                       if (c) {
                           $scope.addll.splice(index_,1);
                       }
                       else{
                           $scope.addll[index_].number1=abc;
                           abc=0;
                       }
                   }
               }

               //总价钱
               $scope.addTao=function(){
                   var bb=0;
                   for (var i = 0; i < $scope.addll.length; i++) {
                       bb+=$scope.addll[i].number1*$scope.addll[i].price;
                   }
                   return bb;
               }
                  //总数为
                  $scope.addTao1=function(){
                   var totalNum=0;
                    for (var i = 0; i < $scope.addll.length; i++) {
                        totalNum+=$scope.addll[i].number1;
                    }
                    return totalNum;
                  }
               //点击全选

       //底部///
           })
       </script>
   </body>
</html>