表格1：《添加商品 + 全选 + 反选 + 批量删除 + 总计》_android 商品点击删除返回数量-优快云博客

本文介绍了一个使用AngularJS实现的商品管理系统，该系统包括商品信息的添加、全选/反选、批量删除等功能，并通过实例展示了如何利用AngularJS进行前端数据管理和交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
           select{
               width: 160px;
               height: 22px;
           }
           #div1{
               text-align: center;
               width: 60%;
           }
           table{
               text-align: center;

           }
           span{
               color: red;
           }

       </style>

   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <fieldset id="a0">
           <legend>添加商品</legend>
           <div id="div1">
           <table>
               <tr>
                   <td>商品名称：</td>
                   <td><input type="text" name="" id="" value="" ng-model="names"/></td>
                   <td><span id="a1"></span></td>
               </tr>
               <tr>
                   <td>商品价格：</td>
                   <td><input type="text" name="" id="" value="" ng-model="jiage"/></td>
                   <td><span id="a2"></span></td>
               </tr>
               <tr>
                   <td>商品数量：</td>
                   <td><input type="text" name="" id="" value="" ng-model="shuliang"/></td>
                   <td><span id="a3"></span></td>
               </tr>
               <tr>
                   <td>商品类型：</td>
                   <td>
                       <select name="" ng-model="leixing">
                       <option value="0">类型</option>
                       <option value="布娃娃">布娃娃</option>
                       <option value="手机">手机</option>
                       <option value="电脑">电脑</option>
                       </select>
                   </td>
                   <td><span id="a4"></span></td>
               </tr>
               <tr>
                   <td></td>
                   <td><input type="button" name="" id="" value="确定" ng-click="btn()" /></td>
                   <td></td>
               </tr>
           </table>
           </div>
       </fieldset>
       
       <input type="button" name="" id="" value="全选" ng-click="qx_btn()"/>
       <input type="button" name="" id="" value="反选" ng-click="fx_btn()"/>
       <input type="button" name="" id="" value="批量删除" ng-click="plsc_btn()"/>
       <span id="" style="color: black;">共计：{{getTotal()}}</span>
       
       <table border="1" cellspacing="0" cellpadding="0">
           <thead>
               <tr>
                   <td>编号</td>
                   <td>商品名称</td>
                   <td>商品价格</td>
                   <td>商品数量</td>
                   <td>商品类型</td>
                   <td>小计</td>
                   <td>删除</td>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat=" x in adddata">
                   <td><input type="checkbox" name="" id="" value="{{$index}}" /></td>
                   <td>{{x.mc_s}}</td>
                   <td>{{x.jg_s}}</td>
                   <td>{{x.sl_s}}</td>
                   <td>{{x.lx_s}}</td>
                   <td>{{x.sl_s*x.jg_s}}</td>
                   <td><input type="button" name="" id="" value="删除" ng-click="del_(x.mc_s)"/></td>
               </tr>
           </tbody>
       </table>

       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){

               $scope.names="";
               $scope.jiage="";
               $scope.shuliang="";
               $scope.leixing="0";
               $scope.adddata=[{mc_s:"铁观音",jg_s:120,sl_s:168,lx_s:"茶叶"}];


               $scope.getTotal=function(){
                   var total=0;
                   for (var i = 0; i < $scope.adddata.length; i++) {
                       total+=$scope.adddata[i].jg_s*$scope.adddata[i].sl_s;
                   }
                   return total;
                }

               //全选状态
                $scope.qx_btn=function(){
                   var all_=$("input[type='checkbox']");
                        //设置循环
                        all_.each(function(){//each是循环的意思
                            $(this).prop("checked",true);//设置选中不选中的一个方法
                        })
                }
                //反选状态
                $scope.fx_btn=function(){
                   var otall=$("input:checked");
                        otall.each(function(){//each是循环的意思
                            $(this).prop("checked",false);
                        })
                }
                //批量删除状态
                $scope.plsc_btn=function(){
                   var deall=$("input:checked");//选中的删除
                        for (var i = deall.length-1; i >=0; i--) {
                       //得到序号--从0开始
                       var index=deall[i].value;
                       //进行删除
                       $scope.adddata.splice(index,1);
                   }
                }

                //点击删除状态
                $scope.del_=function(gname){
                   for (var i = 0; i < $scope.adddata.length; i++) {
                       if ($scope.adddata[i].names=gname) {
                          $scope.adddata.splice(i,1)
                       }
                       break;
                   }
                }


              $scope.btn=function(){
               var names_=$scope.names;
               var jiages_=$scope.jiage;
               var shuliangs_=$scope.shuliang;
               var leixings_=$scope.leixing;
               //名称
               if (names_=="") {
                   $("#a1").html("商品名称不能为空");
                   return;
               } else{
                   $("#a1").html("");
               }
               //价格
                if (jiages_=="") {
                   $("#a2").html("商品价格不能为空");
                   return;
                } else{
                   $("#a2").html("");
                }
                //数量
                if (shuliangs_=="") {
                   $("#a3").html("商品数量不能为空");
                   return;
                } else{
                   $("#a3").html("");

                }
                if (leixings_=="0") {
                   $("#a4").html("商品类型不能为空");
                   return;
                } else{
                   $("#a4").html("");
                }
                //定义数组
                var aaa={};
                   aaa.mc_s=$scope.names;
                   aaa.jg_s=$scope.jiage;
                   aaa.sl_s=$scope.shuliang;
                   aaa.lx_s=$scope.leixing;
                      $scope.adddata.push(aaa);

              }
           })

       </script>
   </body>
</html>