商品购物车

最新推荐文章于 2021-03-12 01:47:44 发布

举一个栗子

最新推荐文章于 2021-03-12 01:47:44 发布

阅读量117

点赞数

分类专栏：网页前段文章标签： anjularjs

本文链接：https://blog.csdn.net/haoran1195/article/details/80875805

版权

网页前段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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/angularjs-route.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <link rel="stylesheet" type="text/css" href="js/index2.css"/>
   </head>

   <body ng-app="Myapp" ng-controller="Myctrl">
       
       <style type="text/css">
           tr:nth-child(odd) {
               background: blanchedalmond;
           }

           tr:nth-child(even) {
               background: palegreen;
           }
       </style>
       <input type="text" placeholder="输入名称插叙" ng-model="ty" />
       <select ng-model="val">
           <option value="">--请选择--</option>
           <option value="gprice">单价正序</option>
           <option value="-gprice">单价倒序</option>
           <option value="gnum">数量正序</option>
           <option value="-gnum">数量倒序</option>
           <option value="gcount">小计正序</option>
           <option value="-gcount">小计倒序</option>
       </select>
       <input type="button" name="" id="" value="添加" ng-click="tianjia()" />
       <input type="button" name="" id="" value="批量删除" ng-click="pishan(g.gid)" />
       <table border="1px">
           <tr>
               <td><input type="checkbox"></td>
               <td>商品编号</td>
               <td>商品名称</td>
               <td>商品单价</td>
               <td>商品数量</td>
               <td>商品小计</td>
               <td>商品操作</td>
           </tr>
           <tr ng-repeat="g in goods|filter:ty|orderBy:val">
               <td><input type="checkbox" ></td>
               <td>{{g.gid}}</td>
               <td>{{g.gname}}</td>
               <td>{{g.gprice}}</td>
               <td><input type="number" value="{{g.gnum}}" ng-model="g.gnum"></td>
               <td>{{g.gcount=g.gnum*g.gprice}}</td>
               <td>
                   <input type="button" value="删除" ng-click="del(g.gid)">
                   <input type="button" value="修改" ng-click="xiugai(g.gid,g.gname,g.gprice,g.gnum)" />
               </td>
           </tr>
       </table>
       <input type="button" value="清除购物车" ng-click="all()" />
       <div id="div1">
           总数量为：{{count()}}<br /> 总计{{sum()}}元
       </div>

       <form action="" method="post" ng-show="isShow">

           商品编号： <input type="text" placeholder="商品编号" ng-model="t_id" />
           <span ng-show="id_show">商品编号不能为空</span><br/> 商品名称： <input type="text" placeholder="商品名称" ng-model="t_name" />
           <span ng-show="name_show">商品名称不能为空</span><br /> 商品单价： <input type="text" placeholder="商品单价" ng-model="t_price" />
           <span ng-show="price_show">商品单价不能为空</span><br /> 商品数量： <input type="text" placeholder="商品数量" ng-model="t_num" />
           <span ng-show="num_show">商品数量不能为空</span><br />
           <input type="button" value="提交" ng-click="save()" />
       </form>

       <script type="text/javascript">
           var an = angular.module("Myapp", []);
           an.controller("Myctrl", function($scope, $http) {
               $scope.goods = [];
               var t = 0;
               $http.get("goods.json").then(function(req) {
                   $scope.goods = req.data;
               })

               $scope.count = function() {
                   var zong = 0;
                   for(var i = 0; i < $scope.goods.length; i++) {
                       var num = $scope.goods[i].gnum;
                       zong = zong + num;
                   }
                   return zong;
               }
               $scope.sum = function() {
                   var zong = 0
                   for(var i = 0; i < $scope.goods.length; i++) {
                       var z = $scope.goods[i].gcount * 1;
                       zong = zong + z;
                   }
                   return zong;
               }
               $scope.del = function(id) {
                   if(confirm("确认删除该数据吗？")) {

                       for(var i = 0; i < $scope.goods.length; i++) {
                           if($scope.goods[i].gid == id) {
                               $scope.goods.splice(i, 1);
                           }
                       }
                   }
               }
               //清空购物差
               $scope.all = function() {
                   $scope.goods = []
               }
               //添加显示
               $scope.tianjia = function() {
                   $scope.isShow = true;
                   t = 0;
               }
               //保存
               $scope.save = function() {
                   //id验证
                   var id = $scope.t_id;
                   if(id == "" || id == null) {
                       $scope.id_show = true;
                       return;
                   } else {
                       $scope.id_show = false;
                   }
                   //姓名验证
                   var name = $scope.t_name;
                   if(name == "" || name == null) {
                       $scope.name_show = true;
                       return;
                   } else {
                       $scope.name_show = false;
                   }
                   //单价验证
                   var price = $scope.t_price;
                   if(price == "" || price == null) {
                       $scope.price_show = true;
                       return;
                   } else {
                       $scope.price_show = false;
                   }
                   //数量验证

                   var num = $scope.t_num;
                   if(num == "" || num == null) {
                       $scope.num_show = true;
                       return;
                   } else {
                       $scope.num_show = false;
                   }
                   //添加
                   var g = {
                       "gid": id,
                       "gname": name,
                       "gnum": num * 1,
                       "gprice": price * 1,
                       "gcount": num * price
                   }
                   if(t == 0) {
                       $scope.goods.push(g);
                   } else {
                       for(var i = 0; i < $scope.goods.length; i++) {
                           var good = $scope.goods[i];
                           if(good.gid == id) {
                               good.gid = id;
                               good.gname = name;
                               good.gprice = price * 1;
                               good.gnum = num * 1;
                               good.gcount = good.gnum * good.gprice;
                               break;
                           }
                       }
                   }
                   $scope.isShow = false;
               }
               $scope.xiugai = function(id, name, price, num) {
                   $scope.isShow = true;
                   t = 1;
                   //回显
                   $scope.t_id = id;
                   $scope.t_name = name;
                   $scope.t_price = price;
                   $scope.t_num = num;
                   //修改

               }
               //批量删除
               $scope.pishan = function() {
                   var cbs=$("[type=checkbox]:checked");
                   for(var i=0;i<cbs.length;i++){
                       var cb=cbs[i];
                       var tr=cb.parentNode.parentNode;
                       var sname=tr.cells[2].innerHTML;
                       for(var j=0;$scope.goods.length;j++){
                           var g=$scope.goods[j];
                           if(sname==g.gname){
                               $scope.goods.splice(j,1);
                               break;
                           }
                       }


                   }
               }

           })
       </script>

   </body>

</html>

举一个栗子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
商品购物车

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;练习&lt;/title&gt; &lt;script src="js/angular.min.js" type="text/j
复制链接

扫一扫