js订单页面 判断信息 排序

html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>title>
      <script type="text/javascript" src="angular.js" >script>
      <script type="text/javascript" src="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>01option>
            <option>02option>
            <option>03option>
            <option>04option>
            <option>05option>
            <option>06option>
            <option>07option>
            <option>08option>
            <option>09option>
            <option>10option>
            <option>11option>
            <option>12option>
         select>-
         <select ng-model="endTime">
            <option>结束月份option>
            <option>01option>
            <option>02option>
            <option>03option>
            <option>04option>
            <option>05option>
            <option>06option>
            <option>07option>
            <option>08option>
            <option>09option>
            <option>10option>
            <option>11option>
            <option>12option>
         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>

你可能感兴趣的:(混合开发)