<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; } select{ height: 22px; border-radius: 5px; } input{ border-radius: 5px; height: 20px; } button{ background-color: green; border-radius: 5px; color: white; border:none; } tr{ height: 30px; } th{ padding-right: 20px; padding-left: 20px; line-height: 25px; } td{ border: 1px solid black; font-weight: 600; } .span{ padding-top: 10px; padding-left: 20px; font-weight: 600; padding-right: 10px; } li{ margin-left: 20px; } </style> <script src="../package/angular-1.5.5/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.data=[ {"chack":false,"ID":"1","name":"iPhone4","username":"张三","tel":"15111111111","price":4999,"city":"北京","datatime":"08-01 10:00","status":true}, {"chack":false,"ID":"2","name":"小米6","username":"李四","tel":"152222222222","price":2999,"city":"上海","datatime":"08-02 10:00","status":true}, {"chack":false,"ID":"3","name":"华为p9","username":"王五","tel":"15333333333","price":3999,"city":"天津","datatime":"08-03 10:00","status":false}, {"chack":false,"ID":"4","name":"OPPO R11","username":"赵六","tel":"154444444444","price":4999,"city":"重庆","datatime":"09-04 10:00","status":null}, {"chack":false,"ID":"5","name":"VIVO","username":"周七","tel":"1566666666666","price":2999,"city":"深圳","datatime":"10-04 10:00","status":false} ]; //城市查找 $scope.citysize="选择城市"; $scope.cityFun=function(item){ //return true; if($scope.citysize!="选择城市"){ if($scope.citysize==item.city){ return true; }else{ return false; } }else{ return true; } }; //状态查找 $scope.statussize="选择状态"; $scope.statusFun=function(item){ //return false; if($scope.statussize!="选择状态"){ if(item.status==true&&$scope.statussize=="待发货"){ return true; }else if(item.status==null&&$scope.statussize=="已收货"){ return true; }else if(item.status==false&&$scope.statussize=="已发货"){ return true; } }else{ return true; } }; //全选,反选 $scope.checkBtn=false; $scope.checkAll=function(){ console.log($scope.checkBtn); if($scope.checkBtn==true){ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].chack=true; } }else{ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].chack=false; } } } //计数功能 var n=0; $scope.fx=function(index){ //console.log(index); if($scope.data[index].check==true){ n++; }else{ n--; } console.log(n); if(n==$scope.data.length){ $scope.checkBtn=true; }else{ $scope.checkBtn=false; } }; //添加 $scope.addup=function () { $scope.a=true; } $scope.addpush=function () { $scope.data.push({ ID:$scope.data.length+1, name: $scope.newname, username: $scope.newusername, tel: $scope.newtel, price: 3999, city:$scope.xuanze, chack: false, datatime:"10-25 12:00", status:true }); $scope.a=false; } //批量删除 $scope.delect=function(){ for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].chack==true){ $scope.data.splice(i,1); i--; } } }; //批量发货 $scope.setstatus=function(){ for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].status==true&&$scope.data[i].chack==true){ $scope.data[i].status=false; } } }; $scope.dianji=function (index) { for(var i=0;i<$scope.data.length;i++){ $scope.data[index].status=false; } } /*排序功能的实现*/ $scope.namenext=""; $scope.clickid=function (b,c,d) { $scope.b=true; $scope.c=false; $scope.d=false; } $scope.clickprice=function (b,c,d) { $scope.b=false; $scope.c=true; $scope.d=false; } $scope.clickdatatime=function (b,c,d) { $scope.b=false; $scope.c=false; $scope.d=true; } }); </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <input type="text" placeholder="用户名搜索" ng-model="namesou"><input type="text" placeholder="手机号搜索" ng-model="telsou"> <select ng-model="citysize"> <option>选择城市</option> <option>北京</option> <option>天津</option> <option>上海</option> <option>重庆</option> <option>深圳</option> </select> <select ng-model="statussize"> <option>选择状态</option> <option>待发货</option> <option>已发货</option> <option>已收货</option> </select> <select> <option>开始月份</option> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> </select> <span>-</span> <select> <option>结束月份</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option> </select><br> <button ng-click="addup()" style="margin-top: 10px;margin-bottom: 10px;">新增订单</button> <button ng-click="setstatus()" style="margin-top: 10px;margin-bottom: 10px;">批量发货</button> <button ng-click="delect()" style="margin-top: 10px;margin-bottom: 10px;">批量删除</button> <table> <thead style="background-color: dimgray"> <tr> <th><input type="checkbox" ng-model="checkBtn" ng-click="checkAll()"></th> <th>ID<button ng-click="clickid()" style="font-size: 12px; height: 17px">排序</button></th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格<button ng-click="clickprice()" style="font-size: 12px; height: 17px">排序</button></th> <th>城市</th> <th>下单时间<button ng-click="clickdatatime()" style="font-size: 12px; height: 17px">排序</button></th> <th>状态</th> </tr> </thead> <tbody> <tr ng-repeat="item in data|filter:{username:namesou}|filter:{tel:telsou}|filter:cityFun|filter:statusFun|orderBy:clickprice($b):clickid($c):clickdatatime($d)"> <td><input type="checkbox" ng-model="item.chack" ng-click="fx($index)"></td> <td ng-model="ID">{{item.ID}}</td> <td>{{item.name}}</td> <td>{{item.username}}</td> <td>{{item.tel}}</td> <td ng-model="price">{{item.price|currency:'¥'}}</td> <td>{{item.city}}</td> <td ng-model="datatime">{{item.datatime}}</td> <td><a href="#"ng-if="item.status==true" ng-click="dianji($index)">发货</a><span ng-if="item.status==null">已收货</span><span ng-if="item.status==false">已发货</span></td> </tr> </tbody> </table> <div style="margin: 0 auto;width: 350px;height: 450px;border: 1px solid black" ng-show="a==true"> <span class="span">新增订单</span><br><br> <span class="span">商品名</span><input type="text" ng-model="newname" placeholder="6-20个字符"><br> <span class="span">用户名</span><input type="text" ng-model="newusername" placeholder="4-16个字符"><br> <span class="span">手机号</span><input type="number" ng-model="newtel"><br> <span class="span">城市</span> <select ng-model="xuanze"> <option>选择城市</option> <option>北京</option> <option>天津</option> <option>上海</option> <option>重庆</option> <option>深圳</option> </select><br> <ul style="background-color: lightpink;border: 1px solid white;padding: 20px;margin-left: 20px;margin-right: 20px;border-radius: 5px;width: 250px"> <li>商品名不能为空!</li> <li>商品名必须是6-20个字符!</li> <li>用户名不能为空</li> <li>用户名必须是4-16个字符!</li> <li>手机号不能为空!</li> <li>手机号格式不正确!</li> <li>请选择城市!</li> </ul> <button ng-click="addpush()" style="margin-left: 50px">提交</button> </div> </body></html>
09-19
09-19