购物车数量加减,增删改查

最新推荐文章于 2024-11-15 11:11:56 发布

原创最新推荐文章于 2024-11-15 11:11:56 发布 · 3.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客展示了如何利用AngularJS实现一个简单的购物车管理功能，包括商品的增删改查、数量加减、全选清空以及按价格和数量排序。用户可以输入关键字搜索商品，对购物车中的商品进行操作，如修改数量、删除商品，以及查看购物车总价。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           select{
               margin-left: 200px;
           }
           .btn01{
               background: greenyellow;
           }
       </style>
       <script src="js/angular.min.js"></script>
       <script>
           var app = angular.module("zyapp",[]);
           app.controller("demoa",function($scope){
               //创建数据
               $scope.px='-gprice';
               $scope.px='-gnum';
               $scope.sj=true;
               $scope.goods=[{ck:false,gname:'鼠标',gprice:80,gnum:1},{ck:false,gname:'键盘',gprice:280,gnum:1},{ck:false,gname:'水杯',gprice:50,gnum:1},{ck:false,gname:'耳机',gprice:79,gnum:1},];

               //全选
               $scope.chAll = function() {
                   for(var i = 0; i < $scope.goods.length; i++) {
                       $scope.goods[i].ck = $scope.flag;
                   }
               }
               //数量加减
               $scope.count = function(n,names){
                   var i = 0;
                   for (var j=0;j<$scope.goods.length;j++) {
                       if($scope.goods[j].gname==names){
                           var i = j;
                       }
                   }
                   if($scope.goods[i].gnum==1&&n==-1){
                       if(confirm("是否删除"+$scope.goods[i].gname)){
                           $scope.goods.splice(i,1);
                       }
                   }else{
                       $scope.goods[i].gnum=$scope.goods[i].gnum+n;
                   }
               }
               $scope.del = function(i){
                   $scope.goods.splice(i,1);
               }
               $scope.sum = function(){
                   var count = 0;
                   for (var i in $scope.goods) {
                       count = count+$scope.goods[i].gnum*$scope.goods[i].gprice;
                   }
                   return count;
               }
               $scope.delAll = function(){
                   var count = 0;
                   for(var i = 0;i<$scope.goods.length;i++){
                       if($scope.goods[i].ck){
                       count++;
                       $scope.goods.splice(i,1);
                       i--;
                       }
                   }
               }
               $scope.add = function(){
                   $scope.goods.push({
                       ck:false,gname:'音箱',gprice:880,gnum:1
                   });
               }
           });

       </script>
   </head>
   <body ng-app="zyapp" ng-controller="demoa">
       <h2>我的购物车</h2>
       <input ng-model="vname" type="text" placeholder="请输入关键字搜索" style="border-radius: 30px; height: 20px; border-color: #000000;"/>
       <select ng-model="px">
           <option value=" ">请选择</option>
           <option value="+gnum">按数量从高到低</option>
           <option value="-gnum">按数量从低到高</option>
           <option value="+gprice">按价格从高到低</option>
           <option value="-gprice">按价格从低到高</option>
       </select>
       <button ng-click="add()" class="btn01">入库</button><br /><br />
       <button ng-click="delAll()">清空购物车</button>
       <table border="1" cellpadding="0" cellspacing="0" width="500px" style="text-align: center;">
           <tr>
               <td> <input type="checkbox" ng-click="chAll()" ng-model="flag"/> </td>
               <td>名称</td>
               <td>价格</td>
               <td>数量</td>
               <td>小计</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="g in goods|orderBy:px:sj|filter:{gname:vname}">
               <td> <input type="checkbox" ng-model="g.ck"/> </td>
               <td>{{g.gname}}</td>
               <td>{{g.gprice|currency:'￥'}}</td>
               <td> <button ng-click="count(+1,g.gname)">+</button> <input type="number" ng-model="g.gnum"/> <button ng-click="count(-1,g.gname)">-</button> </td>
               <td>{{g.gnum*g.gprice|currency:'￥'}}</td>
               <td> <button ng-click="del($index)">删除</button> </td>
           </tr>
       </table>
       总计:{{sum()|currency:'￥'}}
   </body>
</html>