商品信息管理页面-优快云博客

本文链接：https://blog.youkuaiyun.com/cxx13700/article/details/80860872

<!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">
       .whiteline{
           background-color: white;
       }
       .greyline{
           background-color: gainsboro;
       }

   </style>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <center>
       <h3>商品信息操作页面</h3>
       <input type="" placeholder="输入框" ng-model="keyy" />
       <input type="button" value="批量删除" ng-click="plsc()" /><br /><br />
       <table border="1" cellspacing="0" cellpadding="2" width="30%">
           <tr style="background-color: gray;">
               <th><input type="checkbox" ng-model="wew"/></th>
               <th>名字</th>
               <th>价格
                   <input type="button" value="△" ng-click="jia()" />
                   <input type="button" value="▽" ng-click="ge()" />

               </th>
               <th>产地</th>
               <th>删除</th>
           </tr>

           <tr ng-repeat="x in cai|filter:keyy|orderBy:pai" class="{{$index%2==0?'greyline':'whiteline'}}" style="text-align: center;">
               <td><input type="checkbox" value="{{x.name}}" ng-model="wew"/></td>
               <td>{{x.name}}</td>
               <td>{{x.price}}</td>
               <td>{{x.product}}</td>
               <td>
                   <input type="button" value="删除" ng-click="del(x.name)">
                   <input type="button" value="修改" ng-click="gai(x.name)">
               </td>

           </tr>
       </table><br /><br />
       <input type="button" value="入库/添加" ng-click="shouAdd=!showAdd"/><br />
       <div ng-show="shouAdd">
       名称:<input type="" ng-model="qname" id="name"/> <span id=uname></span><br />
       价格:<input type="" ng-model="qprice" id="price" /><span id=uprice></span>

       <br />
       产地:<input type="" ng-model="qproduct" /><br />
       <input type="button" ng-click="addcai()" value="确认添加"/>
       </div>
       <div ng-show="shougai">
       名称:<input type="" ng-model="wname"/><br />
       价格:<input type="" ng-model="wprice" /><br />
       产地:<input type="" ng-model="wproduct" /><br />
       <input type="button" ng-click="gaicai()" value="确认修改"/>
       </div>
       </center>
       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){
               $scope.shouAdd=false;
               $scope.cai=[{ "name": "小米5", "price": 1600, "product": "北京" }, { "name": "华为p10", "price": 4200, "product": "东莞" }, { "name": "vivox20", "price": 2600, "product": "佛山" } ];

               $scope.del=function(name){
                   for (var i = 0; i < $scope.cai.length; i++) {
                       if($scope.cai[i].name==name){
                           $scope.cai.splice(i,1);
                           break;
                       }
                   }
               }
               //批量删除
           $scope.plsc=function(){
               var cbs=$("input:checked");
               alert("确定要删除吗?");
               cbs.each(function(){
                   for (var i = 0; i < $scope.cai.length; i++) {
                       if($scope.cai[i].name==$(this).val()){
                           $scope.cai.splice(i,1);break;
                       }
                   }

               })

           }
           //排序
           $scope.jia=function(){
               $scope.pai="price";

           }
           $scope.ge=function(){
               $scope.pai="-price";
           }

           //验证不能少于3个字符
           $("#name").blur(function(){
               var v =$(this).val();
               if(v<3){
                   $("#uname").html("名字不能小于3个字符");
               }

           });
           //验证价格不能为空
           $("#price").blur(function(){
           var v=$(this).val();
               if(v==null|v==""){
                   $("#uprice").html("价格不能为空");
               }

           });

           //添加
               $scope.addcai=function(){
                   var newcai = [];
                   newcai.name=$scope.qname;
                   newcai.price=$scope.qprice;
                   newcai.product=$scope.qproduct;
                   $scope.cai.push(newcai);
                   $scope.shouAdd=false;

                   //清空输入框数据
                   $scope.qname="";
                   $scope.qprice="";
                   $scope.qproduct="";

           }
               var count;
               //修改
               $scope.gai=function(name){
                   $scope.shougai=true;
                   for (var i = 0; i < $scope.cai.length; i++) {
                       if($scope.cai[i].name==name){
                           count=$scope.cai[i];
                           break;
                       }

                   }
                   //回显
                   $scope.wname=count.name;
                   $scope.wprice=count.price;
                   $scope.wproduct=count.product;

               }
               //修改数据
               $scope.gaicai=function(){
                   count.name=$scope.wname;
                   count.price=$scope.wprice;
                   count.product=$scope.wproduct;
                   $scope.shougai=false;

               }

           })
       </script>
   </body>
</html>

基本操作