上月考

最新推荐文章于 2025-06-15 16:18:12 发布

原创最新推荐文章于 2025-06-15 16:18:12 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#是

上专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           tbody tr:nth-child(odd){
               background-color: aqua;
           }
           tbody tr:nth-child(even){
               background-color: deeppink;
           }
       </style>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.products =[{
                               gid: 001,
                               gname: "手机",
                               gnum: 3,
                               gprice: 1000,
                               gcount: 3000
                               },{
                               gid: 002,
                               gname: "电脑",
                               gnum: 3,
                               gprice: 2000,
                               gcount: 6000
                               },{
                               gid: 003,
                               gname: "电视",
                               gnum: 6,
                               gprice: 500,
                               gcount: 3000
                           }]
               //清除购物车
               $scope.delall = function(){
                   $scope.products.splice(0,$scope.products.length);
               }
               //移除
               $scope.yc = function(i){
                   $scope.products.splice(i,1)
               }
               //总金额
               $scope.sum = function(){
                   count = 0;
                   for(var i in $scope.products){
                       count=count+$scope.products[i].gnum*$scope.products[i].gprice;
                   }
                   return count;
               }
               //总数量
               $scope.snum = function(){
                   count = 0;
                   for(var i in $scope.products){
                       count=count+$scope.products[i].gnum;
                   }
                   return count;
               }
               //加减
               $scope.count = function(num,sname){
                   for(var i = 0; i<$scope.products.length;i++){
                       if($scope.products[i].gname==sname){
                           if($scope.products[i].gnum==1&&num==-1){
                               var f = confirm("是否确认删除？");
                               if(f){
                                   $scope.products.splice(i,1)
                               }
                           }
                           else{
                               $scope.products[i].gnum=
                               $scope.products[i].gnum+num;
                           }
                       }
                   }
               }

           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
   <input type="text" placeholder="根据名称查询" style="background-color: yellow;border-radius: 10px;" ng-model="cx"/>
   <table border="1px">
       <thead>
           <tr style="background-color:darkgrey ;" ng-model="paiz">
               <td ng-click="px='+gid'">商品编号</td>
               <td>商品名称</td>
               <td>商品数量</td>
               <td ng-click="px='-gprice'">商品单价</td>
               <td>商品小计</td>
               <td>操作</td>

           </tr>
       </thead>
       <tbody>
           <tr ng-repeat="pro in products |filter:{gname:cx} | orderBy:px ">
               <td>{{pro.gid}}</td>
               <td>{{pro.gname}}</td>
               <td>
                   <button ng-click="count(+1,pro.gname)">+</button>
                   <input style="width: 30px;" ng-model="pro.gnum" />
                   <button ng-click="count(-1,pro.gname)">-</button>
               </td>
               <td>{{pro.gprice}}</td>
               <td>{{pro.gprice*pro.gnum}}</td>
               <td><button ng-click="yc($index)" style="background-color: yellow;">移除</button></td>

           </tr>
       </tbody>
       <button style="background-color: chartreuse;">商品数量{{snum()}}</button>
       <button style="background-color: chartreuse;">商品数量{{sum()}}</button>
       <button style="background-color: yellow;" ng-click="delall()">清空购物车</button>
   </table>
   </body>
</html>