排序

你的孤独虽败犹荣

于 2017-12-21 10:04:40 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/zhou742626/article/details/78860349

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           table tr:nth-child(odd){
               background-color: #DFDFDF;
           }
       </style>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){
               $scope.goods=[{
                   id:2001,
                   gname:"iphoneX",
                   uname:"张三",
                   tel:"13525565588",
                   price:8699,
                   city:"北京",
                   time:"11-23 10:00:00",
                   state:"已发货"
               },{
                   id:3006,
                   gname:"iphone6",
                   uname:"王红",
                   tel:"18524565588",
                   price:5635,
                   city:"郑州",
                   time:"11-23 11:38:20",
                   state:"已发货"
               },{
                   id:5312,
                   gname:"iphone7",
                   uname:"赵小龙",
                   tel:"17545585598",
                   price:6180,
                   city:"北京",
                   time:"11-20 09:17:30",
                   state:"未发货"
               },{
                   id:2132,
                   gname:"iphone8",
                   uname:"赵强",
                   tel:"17625565618",
                   price:7190,
                   city:"上海",
                   time:"11-23 10:40:21",
                   state:"未发货"
               }];
               //按商品名查询
               $scope.a="";
               //按手机号查询
               $scope.b="";
               //价格排序
               $scope.e="";
               $scope.f="";
               $scope.pricep=function(price){
                   $scope.f=price;
                   if($scope.e==""){
                       $scope.e="-";
                   }else{
                       $scope.e="";
                   }
               }
           });
       </script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <button>新增订单</button>
       <button>批量删除</button>
       <input type="text" placeholder="按商品名称查询" ng-model="a"/>
       <input type="text" placeholder="按手机号查询" ng-model="b" />
       
       <select ng-model="tai">
           <option value="">按状态查询</option>
           <option value="已发货">已发货</option>
           <option value="未发货">未发货</option>
       </select>
       <table border="1px solid black" cellspacing="0" cellpadding="5">
           <tr style="background: #999999;">
               <th><input type="checkbox"/></th>
               <th>id<button ng-click="pricep('id')">排序</button></th>
               <th>商品名</th>
               <th>用户名</th>
               <th>手机号</th>
               <th>价格<button ng-click="pricep('price')">排序</button></th>
               <th>城市</th>
               <th>下单时间<button ng-click="pricep('time')">排序</button></th>
               <th>状态</th>
           </tr>
           <tr ng-repeat="g in goods | filter:{gname:a,tel:b} | filter:tai | orderBy:e+f" >
               <td><input type="checkbox"/></td>
               <td>{{g.id}}</td>
               <td>{{g.gname}}</td>
               <td>{{g.uname}}</td>
               <td>{{g.tel}}</td>
               <td>{{g.price}}</td>
               <td>{{g.city}}</td>
               <td>{{g.time}}</td>
               <td>{{g.state}}</td>
           </tr>
       </table>
   </body>
</html>