程序开发--菜单消费Dome_java程序消费单-优快云博客

本文介绍了一个使用Angular框架实现的菜单管理系统，该系统允许用户通过输入框进行菜单名称的模糊查询，并提供了排序、批量删除等功能。同时，用户可以对菜单进行增加数量、减少数量、下单及撤销等操作。

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

<!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" name="" id="" value="" placeholder="按菜单名称模糊查询" ng-model="mohu"/>
               <select name="" ng-model="order">
                   <option value="0">按要求排序</option>
                   <option value="price">价格正序</option>
                   <option value="-price">价格倒序</option>
                   <option value="xiao">销售正序</option>
                   <option value="-xiao">销售倒序</option>
               </select>
               <input type="button" name="" id="" value="批量删除" ng-click="plsc()"/>
           </div>


               <table border="1" cellspacing="0" cellpadding="1">
           <tr><th><input type="checkbox" id="" value="" ng-model="all" /></th>
               <th>菜单</th>
               <th>菜系</th>
               <th>售价</th>
               <th>月销量</th>
               <th>点菜操作</th>
               <th>菜单操作</th>
               <th>小计</th>
           </tr>
           <tr ng-repeat="x in menus|filter:mohu|orderBy:order">
               <td><input type="checkbox" id="" value="{{x.id}}" ng-model="all" /></td>
               <td>{{x.name}}</td>
               <td>{{x.type[0]+","+x.type[1]}}</td>
               <td>{{x.price|currency:"¥"}}</td>
               <td>{{x.sells}}</td>
               <td>
                   <input type="button" id="" value="-" ng-click="jian(x.id)"/>
                   {{x.number}}
                   <input type="button" id="" value="+" ng-click="jia(x.id)"/>


               </td>
               <td>
                   <input type="button" id="" value="下单" ng-click="xiadan(x.id)"/>
                   <input type="button" id="" value="撤销" ng-click="chexiao(x.id)"/>
               </td>
               <td>{{x.price*x.number}}</td>
           </tr>


       </table>


       <div>
           <p>总消费:{{zong()|currency:"¥"}}</p>
       </div>


           <script type="text/javascript">

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

                   $http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest")
                   .then(function(response){
                       $scope.menus=response.data;
                   });



                   //下单操作
                   $scope.xiadan=function(id){

                       for (var i = 0; i < $scope.menus.length; i++) {
                           if($scope.menus[i].id==id){
                               $scope.menus[i].sells+=$scope.menus[i].number;
                               break;
                           }
                       }
                   }

                   //撤销操作

                   $scope.chexiao=function(id){

                       if(confirm("确定撤销吗?")){

                               for (var i = 0; i < $scope.menus.length; i++) {
                           if($scope.menus[i].id==id){
                               $scope.menus[i].sells-=$scope.menus[i].number;
                               break;
                           }
                       }

                       }


                   }


                   //加的操作
                   $scope.jia=function(id){

                       for (var i = 0; i < $scope.menus.length; i++) {
                           if($scope.menus[i].id==id){
                               $scope.menus[i].number++;
                               break;
                           }
                       }
                   }


                   //减的操作
                   $scope.jian=function(id){

                       for (var i = 0; i < $scope.menus.length; i++) {
                           if($scope.menus[i].id==id){

                               if($scope.menus[i].number==0){
                                   alert("不能再减少了");
                               }else{

                                   $scope.menus[i].number--;
                               break;
                               }


                           }
                       }
                   }



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

                          var cbs = $("input:checked");

                          cbs.each(function(){

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

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

                                      if($scope.menus[i].id==$(this).val()){
                                       $scope.menus.splice(i,1);
                                       break;
                                      }
                                }
                          })


                   }

                   //总消费
                   $scope.zong=function(){

                       var money=0;

                       for (var i = 0; i < $scope.menus.length; i++) {
                           money+=$scope.menus[i].price*$scope.menus[i].number;
                       }
                       return money;
                   }



               });



           </script>




       </center>



   </body>
</html>