点菜

<!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>
 </head>
 <body ng-app="myapp" ng-controller="myctrl">
  
  <div id="">
   <input type="text" placeholder="模胡查询" ng-model="searKey" />
   <select name="" ng-model="orderKey">
    <option value="">-排序-</option>
    <option value="sells">-销量正序-</option>
    <option value="-sells">-销量倒序-</option>
    <option value="price">-价格正序-</option>
    <option value="-price">-排价格倒序-</option>
   </select>
   <input type="button" name="" id="" value="批量删除"  ng-click="pl()"/>
  </div>
  
  <table border="" cellspacing="" cellpadding="">
   <tr>
    <th>
     <input type="checkbox" name="" 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:{name:searKey}|orderBy:orderKey">
    <td>
     <input type="checkbox" name="" 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" name="" id="" value="-" ng-click="reduce(x.id)"/>
     {{x.number}}
     <input type="button" name="" id="" value="+" ng-click="increase(x.id)"/>
    </td>
    <td>
     <input type="button" name="" id="" value="下单" ng-click="ordermenu(x.id)"/>
     <input type="button" name="" id="" value="撤销" ng-click="revmenu(x.id)"/>
    </td>
    <td>{{x.price*x.number}}</td>
   </tr>
  </table> 
  
  
  <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.ordermenu = 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;
      }
     }
    }
    
    $scope.revmenu = 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;
       $scope.menus[i].number = 0;
      }
     }
    }
    
    $scope.reduce = function(id){
     for (var i = 0; i < $scope.menus.length; i--) {
      if($scope.menus[i].number == 0){
       $scope.menus.splice(i,1)
      }else{
       if($scope.menus[i].id == id){
       $scope.menus[i].number--;
       }
      }
     }
    }
    
    $scope.increase = function(id){
     for (var i = 0; i < $scope.menus.length; i++) {
      if($scope.menus[i].id == id){
       $scope.menus[i].number++;
      }
     }
    }
    
    
    $scope.pl = function(){
     var bs = $("input:checked");
     if(bs.length == 0){
      alert(bs.length);
     }else{
      var b = confirm("确定删除吗?");
      if(b){
       bs.each(function(){
        for (var i = 0; i < $scope.menus.length; i++) {
         if($(this).val() == $scope.menus[i].id){
          $scope.menus.splice(i,1);
          break;
         }
        }
       })
      }
     }
    }
    

    
   })
   

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值