练习Demo

最新推荐文章于 2022-05-30 14:27:10 发布
皱巴巴的掌纹
最新推荐文章于 2022-05-30 14:27:10 发布
阅读量305
点赞数
本文链接：https://blog.csdn.net/WaitInTheRain/article/details/78342052
版权
<!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>
皱巴巴的掌纹
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习Demo

html>html> head> meta charset="UTF-8"> title>title> script type="text/javascript" src="../AngularJS/angular.js" >script> script type="text/javascript" src="../AngularJS/ang
复制链接

扫一扫