程序开发zsgc

最新推荐文章于 2022-10-10 20:18:02 发布

cjavazhao

最新推荐文章于 2022-10-10 20:18:02 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/cjavazhao/article/details/80859484

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <center>


               <div>
                  查询:<input type="text" id="" value="" placeholder="请输入查询的关键字" ng-model="searchkey"/>

                  排序:<select name="" ng-model="orderbykey">
                      <option value="0">请选择</option>
                      <option value="name">--名称正序--</option>
                       <option value="-name">--名称倒序--</option>
                      <option value="price">--价格正序--</option>
                      <option value="-price">--价格倒序--</option>
                  </select>

                  <input type="button" id="" value="入库/增加" ng-click="showadd=!showadd"/>

               </div>





           
           <div ng-show="showadd">

               <ul style="list-style: none;">
                   <li>
                       商品编号:<input type="text" ng-model="asid"/>
                   </li>

                   <li>
                       商品名称:<input type="text" ng-model="aname"/>
                   </li>

                   <li>
                       商品价格:<input type="text" ng-model="aprice"/>
                   </li>

                   <li>
                       商品产地:<input type="text" ng-model="address2"/>
                   </li>

                   <li>
                       <input type="button" value="添加" ng-click="addshop()"/>
                   </li>


               </ul>

           </div>








           <div>

               <input type="button" value="批量删除" ng-click="plsc()"/>

           </div>


           <table border="1" cellspacing="0" cellpadding="1" width="50%" style="text-align: center;" ng-show="isshowtable">
               <tr style="background-color: gray;">
                   <th><input type="checkbox" value="" ng-model="cball"/></th>
                   <th>序号 </th>
                   <th>id</th>
                   <th>商品名称</th>
                   <th>价格</th>
                   <th>产地</th>
                   <th>操作</th>
               </tr>


               <tr ng-repeat="x in shops|filter:searchkey|orderBy:orderbykey">
                   <td><input type="checkbox" name="" id="" value="{{x.sid}}" ng-model="cball"/></td>
                   <td>{{$index}}</td>
                   <td>{{x.sid}}</td>
                   <td>{{x.name}}</td>
                   <td>{{x.price}}</td>
                   <td>{{x.address}}</td>

                   <td>
                       <input type="button" name="" id="" value="删除" ng-click="del(x.sid)"/>
                       <input type="button" name="" id="" value="修改" ng-click="modify(x.sid)"/>

                   </td>

               </tr>
           </table>


               <div ng-show="showmodify">

               <ul style="list-style: none;">

                   <li>
                       商品名称:<input type="text" ng-model="mname"/>
                   </li>

                   <li>
                       商品价格:<input type="text" ng-model="mprice"/>
                   </li>

                   <li>
                       商品产地:<input type="text" ng-model="maddress"/>
                   </li>

                   <li>
                       <input type="button" value="修改" ng-click="modifyshop()"/>
                   </li>


               </ul>

           </div>


       </center>

                   <script type="text/javascript">

                      var app = angular.module("myapp",[]);
                      app.controller("myctrl",function($scope){

                          //初始化是"请选择"
                          $scope.orderbykey="0";


                          //是否隐藏列表
                          $scope.isshowtable=true;

                          //是否隐藏添加布局
                          $scope.showadd=false;


                          //定义初始化数据
                          $scope.shops=[{sid:"001",name:"华为",price:"4800",address:"北京"},
                         {sid:"002",name:"vivoX20",price:"2800",address:"杭州"},
                          {sid:"003",name:"OPPO",price:"2500",address:"北京"},
                          {sid:"004",name:"苹果",price:"7700",address:"美国"}];


                          //定义删除方法
                          $scope.del=function(id){

                                  for (var i = 0; i < $scope.shops.length; i++) {

                                          if($scope.shops[i].sid==id){
                                             $scope.shops.splice(i,1);
                                                break;
                                          }
                                  }

                                  if($scope.shops.length==0){

                                          //隐藏列表
                                          $scope.isshowtable=false;
                                  }

                          }


                          //定义批量删除
                          $scope.plsc=function(){

                              //得到选中的CheckBox
                              var cbs=$("input:checked");

                              cbs.each(function(){//循环遍历

                                     alert($(this).val());


                              for (var i = 0; i < $scope.shops.length; i++) {

                                  if($scope.shops[i].sid==$(this).val()){
                                     $scope.shops.splice(i,1);

                                     break;
                                  }
                              }

                              });

                              if($scope.shops.length==0){

                                          //隐藏列表
                                          $scope.isshowtable=false;
                                  }

                          }



                          //添加商品
                          $scope.addshop=function(){

                              var newshop={};

                              newshop.sid=$scope.asid;
                              newshop.name=$scope.aname;
                              newshop.price=$scope.aprice;
                              newshop.address=$scope.address2;

                        //添加到集合
                        $scope.shops.push(newshop);

                        //隐藏添加布局
                        $scope.showadd=false;

                        //清空数据
                        $scope.asid="";
                        $scope.aname="";
                        $scope.aprice="";
                        $scope.address2="";

                          }




                          //定义一个全局变量
                          var modifydata;

                          //修改
                          $scope.modify=function(sid){

                              //显示
                              $scope.showmodify=true;
                              for (var i = 0; i < $scope.shops.length; i++) {

                                       if($scope.shops[i].sid==sid){

                                          modifydata=$scope.shops[i];//modifydata得到循环遍历出的shops数据
                                          break;
                                       }
                              }


                              //赋值       往上面<ul><li></li></ul>格里赋值从而回显出来
                              $scope.mname=modifydata.name; //遍历出shops的数据在赋值给上面<ul><li></li></ul>格里面然后格子里就得到了数据也就回显出来了;
                              $scope.mprice=modifydata.price;
                              $scope.maddress=modifydata.address;
                          }


                          //真正修改数据
                          $scope.modifyshop=function(){

                              modifydata.name=$scope.mname;//$scope.mname这是<ul><li></li></ul>格里的值在把它附给<td>{{x.name}}</td>表格里
                              modifydata.price=$scope.mprice;
                              modifydata.address=$scope.maddress;

                               //隐藏
                               $scope.showmodify=false;
                          }


                      });





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

cjavazhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
程序开发zsgc

&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="angular.min.js" type="text/javascri
复制链接

扫一扫