<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../AngularJS/angular.js" ></script> <script type="text/javascript" src="../AngularJS/angular-route.js" ></script> <script> var app = angular.module("myApp",['ngRoute']); //配置路由 app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/",{}) .when("/addOrder",{ controller:"addOrderCtrl", templateUrl:"addOrder.html" }) .otherwise({redirectTo:"/addOrder"}); }]); app.controller("myCtrl",function($scope,$location){ //数据源 $scope.orders = [{ id:1, goodName:"iPone4", userName:"张三", num:15555555555555, price:4999.00, city:"北京", time:"08-01 10:00", state:"发货" },{ id:2, goodName:"小米6", userName:"李四", num:155666666666666, price:2999.00, city:"上海", time:"09-01 10:00", state:"已发货" },{ id:3, goodName:"华为P9", userName:"王五", num:15577777777777, price:3999.00, city:"天津", time:"10-01 10:00", state:"已收货" },{ id:4, goodName:"OPPO R11", userName:"赵六", num:155888888888, price:4999.00, city:"重庆", time:"11-11 10:00", state:"发货" }]; //定义跳转方法 $scope.goToPath = function(){ $location.path("/addOrder"); } $scope.startTime = "开始月份"; $scope.endTime = "结束月份"; //过滤时间 $scope.filterTime = function(index){ //获得开始和结束月份 //获取当前订单的时间月份 var time = $scope.orders[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.changeState = function(index){ $scope.orders[index].state = "已发货"; } }); //添加订单控制器 app.controller("addOrderCtrl",function($scope){ $scope.goodName = ""; $scope.userName = ""; $scope.num = ""; $scope.city = "选择城市"; $scope.li1 = false; $scope.li2 = false; $scope.li3 = false; $scope.li4 = false; $scope.li5 = false; $scope.li6 = false; $scope.li7 = false; $scope.sub = function(){ //判断商品名是否为空 if($scope.goodName == null || $scope.goodName == ""){ $scope.li1 = true; }else{ $scope.li1 = false; //判断商品名是否符合格式 if($scope.goodName.length <= 6 || $scope.goodName.length >= 20){ alert("asf") $scope.li2 = true; }else{ $scope.li2 = false; } } //判断用户名是否为空 if($scope.userName == null || $scope.userName == ""){ $scope.li3 = true; }else{ $scope.li3 = false; //判断用户名是否符合格式 if($scope.userName.length <= 4 || $scope.userName.length >= 16){ $scope.li4 = true; }else{ $scope.li4 = false; } } //判断手机号是否为空 if($scope.num == null || $scope.num == ""){ $scope.li5 = true; }else{ $scope.li5 = false; //判断手机号是否符合格式 alert($scope.num.length); if($scope.num.length == 11){ if(isNaN($scope.num)){ $scope.li6 = true; }else{ $scope.li6 = false; } }else{ $scope.li6 = true; } } //判断手机号是否符合格式 if($scope.city == "选择城市"){ $scope.li7 = true; }else{ $scope.li7 = false; } if(!$scope.li1 && !$scope.li2 && !$scope.li3 && !$scope.li4 && !$scope.li5 && !$scope.li6 && !$scope.li7){ //全显示,格式全不正确,才能进来 //获得ID var idMax = 0; for(index in $scope.orders){ if($scope.orders[index].id>idMax){ idMax = $scope.orders[index].id; } } //alert("添加"); var date = new Date(); var month = date.getMonth()+1; var day = date.getDate(); var hours = date.getHours(); var minute = date.getMinutes(); var myTime = month+"-"+day+" "+hours+":"+minute; var order = { id:idMax+1, goodName:$scope.goodName, userName:$scope.userName, num:$scope.num, price:2999.00, city:$scope.city, time:myTime, state:"发货" }; //将订单添加到数据源 $scope.orders.push(order); }else{ // } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>订单页面</h3> <input type="text" placeholder="用户名搜索" size="8" /> <input type="text" placeholder="手机号搜索" size="8" /> <select> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>天津</option> <option>重庆</option> </select> <select> <option>选择状态</option> <option>发货</option> <option>已发货</option> <option>已收货</option> </select> <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>- <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><br /><br /> <button ng-click="goToPath()">新增订单</button> <button>批量发货</button><br /><br /> <table border="1 solid blue" cellpadding="10" cellspacing="0"> <thead> <tr> <th><input type="checkbox" /> </th> <th>ID 排序</th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格 排序</th> <th>城市</th> <th>下单时间 排序</th> <th>状态</th> </tr> </thead> <tbody> <tr ng-repeat="order in orders" ng-if="filterTime($index)"> <td><input type="checkbox" /> </td> <td>{{order.id}}</td> <td>{{order.goodName}}</td> <td>{{order.userName}}</td> <td>{{order.num}}</td> <td>{{order.price}}</td> <td>{{order.city}}</td> <td>{{order.time}}</td> <td> <span ng-if="order.state == '发货'"><a ng-click="changeState($index)" href="#">{{order.state}}</a></span> <span ng-if="order.state == '已发货'">{{order.state}}</span> <span ng-if="order.state == '已收货'">{{order.state}}</span> </td> </tr> </tbody> </table> </center> <!-- 添加定点页面 --> <script type="text/ng-template" id="addOrder.html"> <center> <h3>新增订单</h3> 商品名:<input type="text" ng-model="goodName" placeholder="6-20个字符"/><br /><br /> 用户名:<input type="text" ng-model="userName" placeholder="4-16个字符"/><br /><br /> 手机号:<input type="text" ng-model="num" placeholder="4-16个字符"/><br /><br /> 城市:<select ng-model="city"> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>天津</option> <option>重庆</option> </select><br /> <ul> <li ng-show="li1">商品不能为空</li> <li ng-show="li2">商品名必须是6-20个字符</li> <li ng-show="li3">用户名不能为空</li> <li ng-show="li4">用户名必须是4-16个字符</li> <li ng-show="li5">手机号不能为空</li> <li ng-show="li6">手机号格式不正确</li> <li ng-show="li7">请选择城市</li> </ul> <input ng-click="sub()" type="button" value="提交"/><br /> </center> </script> <div ng-view> </div> </body> </html>
HTML angular+route:订单
最新推荐文章于 2024-04-21 12:37:11 发布