<!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>
AngualrJS实现购物车订单功能/添加/排序/过滤
最新推荐文章于 2022-04-19 16:53:23 发布