<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> button{ background-color: #19d656; } table tr:nth-child(odd){background:#CCCCCC;} table tr:nth-child(even){background:#FFFFFF;} </style> <script src="AngularJS/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { $scope.arr = [{ acheck:false, phoneName:"iphone9", name:"張三", phoneNum:15666916123, price:4999, city:"北京", time:"08-01 10:00", state:"發貨" },{ acheck:false, phoneName:"小米4", name:"李四", phoneNum:15615116123, price:3999, city:"上海", time:"08-02 10:00", state:"發貨" },{ acheck:false, phoneName:"iphone8", name:"張三", phoneNum:15662226123, price:9999, city:"深圳", time:"08-03 10:00", state:"發貨" },{ acheck:false, phoneName:"iphone4", name:"張三", phoneNum:15666916123, price:4999, city:"北京", time:"08-01 10:00", state:"發貨" }]; //添加訂單的按鈕 $scope.addbtn = function () { $scope.myVal = !$scope.myVal; } $scope.addData = function (goodsName,userName,num,city) { var flag = true; //商品名判斷 if(goodsName == "" || goodsName == null){ $scope.A1 = true; flag=false; }else{ $scope.A1 = false; if(goodsName.length <6 || goodsName.length >20){ $scope.A2 = true; flag=false; }else{ $scope.A2 = false; } } //用戶名判斷 if(userName == "" || userName == null){ $scope.A3 = true; flag=false; }else{ $scope.A3 = false; if(userName.length <4 || userName.length >16){ $scope.A4 = true; flag=false; }else{ $scope.A4 = false; } } //手機號判斷 if(num == "" || num == null){ $scope.A5 = true; flag=false; }else{ $scope.A5 = false; if(num.length != 11){ $scope.A6 = true; flag=false; }else{ $scope.A6 = false; } } //手機號判斷 if(city == "" || city == null){ $scope.A7 = true; flag=false; }else{ $scope.A7 = false; } if(flag){ $scope.arr.push({ acheck:false, //goodsName,userName,num,city phoneName:goodsName, name:userName, phoneNum:num, price:3999, city:city, time:"12-02 10:00", state:"待發貨" }); } } //全選 $scope.all = function () { if($scope.allCheck){ for(i in $scope.arr){ $scope.arr[i].acheck = true; } }else{ for(i in $scope.arr){ $scope.arr[i].acheck = false; } } } $scope.checkSelectAll = function(){ var flag = false; for(i in $scope.arr){ if($scope.arr[i].acheck){ }else{ flag = true; } } //至少有一個沒有被選中 if(flag){ $scope.allCheck = false; }else{ $scope.allCheck = true; } } //改變狀態 $scope.fahuo = function (index) { $scope.arr[index].state = '已發貨'; } $scope.daifahuo = function (index) { $scope.arr[index].state = '發貨'; } //城市查詢 $scope.city1="選擇城市"; $scope.citys=function (goods) { //alert("1"); if( $scope.city1!="選擇城市") { if( $scope.city1==goods.city) { return true; } else { return false; } } else { return true; } } //狀態查詢 $scope.state1="選擇狀態"; $scope.states=function (goods) { //alert("1"); if( $scope.state1!="選擇狀態") { if( $scope.state1==goods.state) { return true; } else { return false; } } else { return true; } } //判斷日期 $scope.startTime = "開始月份"; $scope.endTime = "結束月份"; //過濾時間 $scope.filterTime = function(index){ //獲得開始和結束月份 //獲取當前訂單的時間月份 var time = $scope.arr[index].time; var month = parseInt(time.split("-")[0]); if($scope.startTime == "開始月份" || $scope.endTime == "結束月份"){ return true; }else{ var start = parseInt($scope.startTime); var end = parseInt($scope.endTime); if(month >=start && month<=end ){ return true; }else{ return false; } } } //排序 $scope.aflag = "-"; $scope.aname = "name"; $scope.order = function (clomnName) { alert(clomnName); $scope.aname = clomnName; //判斷 if($scope.aflag == "-"){ $scope.aflag = ""; }else{ $scope.aflag = "-" } }; $scope.pifa = function () { for(i in $scope.arr){ if($scope.arr[i].acheck){ $scope.arr[i].state = '已發貨'; }else{ } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <table cellpadding="5px" cellspacing="0"> <tr> <td><input type="text" placeholder="用戶名搜索" ng-model="selectName"></td> <td><input type="text" placeholder="手機號搜索" ng-model="selectPhoneNum"></td> <td> <select ng-model="city1"> <option>選擇城市</option> <option>北京</option> <option>上海</option> <option>天津</option> <option>深圳</option> </select> </td> <td> <select ng-model="state1"> <option>選擇狀態</option> <option>發貨</option> <option>待發貨</option> <option>已發貨</option> <option>已收貨</option> </select> </td> <td> <select ng-model="startTime"> <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> <option>12</option> </select> </td> <td>-</td> <td> <select ng-model="endTime"> <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> <option>12</option> </select> </td> </tr> <tr> <td colspan="2"> <button ng-click="addbtn()">新增訂單</button> <button ng-click="pifa()">批量發貨</button> </td> </tr> </table> <table border="1 solid blue" width="1000px" cellspacing="0" cellpadding="3"> <tr> <th><input type="checkbox" ng-model="allCheck" ng-click="all()"></th> <th width="70px">ID<button ng-click="order('id')">排序</button></th> <th>商品名</th> <th>用戶名</th> <th>手機號</th> <th width="80px">價格<button ng-click="order('price')">排序</button></th> <th>城市</th> <th width="130px">下單時間<button ng-click="order('time')">排序</button></th> <th>狀態</th> </tr> <tr ng-repeat="goods in arr | filter:{'name':selectName} | filter:{'phoneNum':selectPhoneNum} | filter:citys | filter:states | orderBy:(aflag+aname)" ng-if="filterTime($index)"> <td><center><input type="checkbox" ng-model="goods.acheck" ng-click="checkSelectAll()"></center></td> <td><center>{{$index+1}}</center></td> <td><center>{{goods.phoneName}}</center></td> <td><center>{{goods.name}}</center></td> <td><center>{{goods.phoneNum}}</center></td> <td><center>{{goods.price | currency:"￥"}}</center></td> <td><center>{{goods.city}}</center></td> <td><center>{{goods.time}}</center></td> <td><center> <span ng-if="goods.state == '發貨'" ng-click="fahuo($index)">{{goods.state}}</span> <span ng-if="goods.state == '待發貨'" ng-click="daifahuo($index)">{{goods.state}}</span> <span ng-if="goods.state == '已發貨'" ng-click="yifahuo()">{{goods.state}}</span> </center></td> </tr> </table> <div ng-if="myVal"> <h3>新增訂單</h3> 商品名:<input type="text" placeholder="6-20個字符" ng-model="goodsName"><br> 用戶名:<input type="text" placeholder="4-16個字符" ng-model="userName"><br> 手機號:<input type="text" ng-model="num"><br> 城市:<select ng-model="city"> <option>選擇城市</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="天津">天津</option> <option value="深圳">深圳</option> </select><br> <div> <ul> <li ng-if="A1">商品名不可爲空</li> <li ng-if="A2">商品名必須是6-20個字符</li> <li ng-if="A3">用戶名不可爲空</li> <li ng-if="A4">用戶名必須是4-16個字符</li> <li ng-if="A5">手機號不可爲空</li> <li ng-if="A6">手機號格式不正確</li> <li ng-if="A7">請選擇城市</li> </ul> </div> <button ng-click="addData(goodsName,userName,num,city)">提交</button> </div> </body> </html>
