增删改查,排序,综合发货

最新推荐文章于 2025-10-10 22:49:36 发布

原创最新推荐文章于 2025-10-10 22:49:36 发布 · 307 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的药品管理系统，该系统包括药品信息的增删改查、批量操作等功能，并支持条件筛选和排序。通过这个实例，读者可以学习到AngularJS在实际项目中的应用。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script src="js/jquery-1.11.1.js"></script>
       <script>
           var app = angular.module("zyapp",[]);
           app.controller("demoa",function($scope){
               //修改定义值为false
               $scope.f = false;
               //创建数组,添加数据
               $scope.goods = [{ck:false,gnum:'2',gname:'感冒颗粒',uname:'张三',tel:'15369548622',gprice:'695',city:'上海',gtime:'2017-5-18 18:36',state:'未发货'},
               {ck:false,gnum:'7',gname:'止咳糖浆',uname:'李四',tel:'15324352622',gprice:'456',city:'北京',gtime:'2017-4-18 18:26',state:'已发货'},
               {ck:false,gnum:'3',gname:'排毒养颜胶囊',uname:'王五',tel:'15369548622',gprice:'155',city:'上海',gtime:'2017-5-18 16:36',state:'已发货'},
               {ck:false,gnum:'1',gname:'感康',uname:'赵六',tel:'15369548622',gprice:'755',city:'广州',gtime:'2017-6-18 10:06',state:'已发货'},
               {ck:false,gnum:'5',gname:'眼药水 ',uname:'田七',tel:'15369548622',gprice:'235',city:'上海',gtime:'2017-9-18 12:36',state:'未发货'},
               {ck:false,gnum:'6',gname:'阿莫西林',uname:'王八',tel:'15369548622',gprice:'525',city:'广州',gtime:'2017-7-18 18:56',state:'未发货'},
               {ck:false,gnum:'4',gname:'藿香水',uname:'姜超',tel:'15369548622',gprice:'250',city:'上海',gtime:'2017-1-18 16:46',state:'已发货'},
               {ck:false,gnum:'9',gname:'阿司匹林',uname:'谭维维',tel:'15369548622',gprice:'305',city:'北京',gtime:'2017-4-18 12:46',state:'未发货'},
               {ck:false,gnum:'8',gname:'酒精棉',uname:'李小璐',tel:'15369548622',gprice:'563',city:'上海',gtime:'2017-3-18 18:32',state:'已发货'},
               ];

               //全选和反选
               $scope.ckAll=function(){
                   //循环遍历
                   for(var i=0;i<$scope.goods.length;i++){
                       //创建关系
                       $scope.goods[i].ck=$scope.flag;
                   }
               }


               //批量发货
               $scope.selAll = function(){
                   //循环
                   for(var i=0;i<$scope.goods.length;i++){
                       //判断
                       if($scope.goods[i].ck){
                           //创建关系
                           $scope.goods[i].state='已发货';
                       }else{
                           alert("请选择");
                       }
                   }
               }

               //批量删除
               $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.del = function(i){
                   $scope.goods.splice(i,1);
               }

               //获取新增的用户
               $scope.add=function(){
                   //设置添加表格隐藏
                   $scope.tabshow=false;
                   //获取输入框的值
                   var v_ID = $scope.gnum;
                   var v_gname=$scope.gname;
                   var v_uname = $scope.uname;
                   var v_tel = $scope.tel;
                   var v_city = $scope.city;
                   var v_state = $scope.state;
                   var v_price = $scope.gprice;
                   var v_time=$scope.gtime;
                   //添加判断
                   if(v_ID==""){
                       alert("id不能为空")
                   }if(v_time==""){
                       alert("时间不能为空")
                   }if(v_state==""){
                       alert("状态不能为空")
                   }if(isNaN(v_ID)!=false){
                       alert("id必须是数字")
                   }if(v_gname==""){
                       alert("商品名不能为空")
                   }if(v_uname==""){
                       alert("用户名不能为空")
                   }if(v_tel==""){
                       alert("电话不能为空")
                   }if(isNaN(v_tel)!=false){
                       alert("手机号必须是数字")
                   }if(v_city==""){
                       alert("城市不能为空")
                   }if(v_price==""){
                       alert("价格不能为空")
                   }else{
                       //添加到数组
                       $scope.goods.push({
                           gnum:v_ID,
                           gname:v_gname,
                           uname:v_uname,
                           tel:v_tel,
                           gprice:v_price,
                           gtime:v_time,
                           city:v_city,
                           state:v_state
                       }
                       );
                   }
               }

           });
       </script>
   </head>
   <body ng-app="zyapp" ng-controller="demoa">
       <input type="text" placeholder="商品名查询" ng-model="vgname"/>
       <input type="text" placeholder="用户名查询" ng-model="vuname"/>
       <select ng-model="vcity">
           <option value="">选择城市</option>
           <option >北京</option>
           <option>上海</option>
           <option>广州</option>
       </select>
       <select ng-model="vstate">
           <option value="">选择状态</option>
           <option>已发货</option>
           <option>未发货</option>
       </select>
       <select>
           <option>开始月份</option>
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
           <option>6</option>
           <option>7</option>
           <option>8</option>
           <option>9</option>
           <option>10</option>
           <option>11</option>
           <option>12</option>
       </select>
       <select>
           <option>结束月份</option>
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
           <option>6</option>
           <option>7</option>
           <option>8</option>
           <option>9</option>
           <option>10</option>
           <option>11</option>
           <option>12</option>
       </select>
       <select ng-model="px">
           <option value="">ID排序</option>
           <option value="-gprice">价格从高到低</option>
           <option value="+gprice">价格从低到高</option>
           <option value="-gnum">ID从高到低</option>
           <option value="+gnum">ID从低到高</option>
       </select><br /><br />
       <button ng-click="tabshow=true">新增用户</button>
       <button ng-click="selAll()">批量发货</button>
       <button ng-click="delAll()">批量删除</button>
       <span>敏感字:米(商品名)-->替换成*</span><br /><br />
       <table style="text-align: center;" width="800px" border="1" cellpadding="0" cellspacing="0" >
           <tr>
               <td> <input type="checkbox" ng-click="ckAll()" ng-model="flag"/> </td>
               <td>ID</td>
               <td>商品名</td>
               <td>用户名</td>
               <td>手机号</td>
               <td>价格</td>
               <td>城市</td>
               <td>下单时间</td>
               <td>状态</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="g in goods|filter:{gname:vgname,uname:vuname,city:vcity,state:vstate}|orderBy:px">
               <td> <input type="checkbox" ng-model="g.ck"/> </td>
               <td>{{g.gnum}}</td>
               <td>{{g.gname}}</td>
               <td>{{g.uname}}</td>
               <td>
                   <span ng-hide="f">{{g.tel}}</span>
                   <span ng-show="f">
                       <input type="text" ng-model="g.tel"/>
                   </span>
               </td>
               <td>{{g.gprice}}</td>
               <td>{{g.city}}</td>
               <td>{{g.gtime}}</td>

               <td>
                   
                   <span style="color: red;" ng-if="g.state=='未发货'">
                       <a style="color: red;" href="#" ng-click="g.state='已发货'">{{g.state}}</a>
                   </span>
                   <span style="color: green; " ng-if="g.state=='已发货'">
                           已发货
                   </span>
                   </td>
               <td> <a href="#" ng-click="f=!f">修改</a> <a href="#" ng-click="del($index)">删除</a></td>

           </tr>
       </table>
       <table ng-show="tabshow">
           <tr>
               <td>ID:</td>
               <td><input type="text" ng-model="gnum"/></td>
           </tr>
           <tr>
               <td>商品名:</td>
              <td><input type="text" ng-model="gname"/></td>
           </tr>
           <tr>
               <td>用户名:</td>
               <td><input type="text" ng-model="uname"/></td>
           </tr>
           <tr>
               <td>手机号:</td>
               <td><input type="text" ng-model="tel"/></td>
           </tr>
           <tr>
               <td>价格:</td>
               <td><input type="text" ng-model="gprice"/></td>
           </tr>

           <tr>
               <td>城市:</td>
               <td><input type="text" ng-model="city"/></td>
           </tr>
           <tr>
               <td>下单时间:</td>
               <td><input type="text" ng-model="gtime"/></td>
           </tr>
           <tr>
               <td>状态:</td>
               <td><input type="text" ng-model="state"/></td>
           </tr>
           <tr>
               <td>
                   <button ng-click="add()">保存</button>
                   <button ng-click="tabshow=false">取消</button>
               </td>
           </tr>
       </table>

   </body>
</html>