Angular代码复习

最新推荐文章于 2020-12-18 21:50:33 发布

lsq666888

最新推荐文章于 2020-12-18 21:50:33 发布

阅读量175

点赞数

本文链接：https://blog.csdn.net/lsq666888/article/details/79232639

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
          var app=angular.module("myApp",[]);
          app.controller("myctr",function($scope){
           i=0,
           $scope.stus=[{
           id:7,
           goods:"oppd R9",
           name:"关羽",
           shouji:15777777777,
           price:4999,
           chengshi:"北京",
           rq:new Date("2017-9-"+(i+1)),
           state:"未发货"
           },

           {
                   id:12,
                   goods:"vivo",
                   name:"赵云",
                   shouji:1333333333,
                   price:2988,
                   chengshi:"上海",
                   rq:new Date("2017-9-"+(i+1)),
                       state:"未发货"
               },
               {
                   id:1,
                   goods:"iphone 8 plus",
                   name:"曹操",
                   shouji:15111111111,
                   price:7588,
                   chengshi:"上海",
                   rq:new Date("2017-8-"+(i+1)),
                   state:"已发货"
               },

               {
                   id:11,
                   goods:"Note5",
                   name:"黄忠",
                   shouji:1333333333,
                   price:699,
                   chengshi:"重庆",
                   rq:new Date("2017-7-"+(i+1)),
                       state:"已发货"
               }
           ];
           //日期排序
       $scope.yue=function(m){
       var qq=m.getMonth()+1;
       //获取开始日期
           var ks=   $scope.ks;
       var js=$scope.js;

                   if(ks==undefined&&js==undefined){
                       return true;
                   }else if(qq>=ks&&qq<=js){
                           return true;
                   }
                   return false;
                   }

          //删除
          $scope.sc=function(i){
             $scope.stus.splice(i,1);
          }
          // 批量删除
            $scope.del=function(){
               //遍历数组
               for(var i=0;i<$scope.stus.length;i++){
                   if($scope.stus[i].ck){
                       $scope.stus.splice(i,1);
                       i--;
                   }
               }
            }
          //批量发货
          $scope.pl=function(){
             for(var i=0;i<$scope.stus.length;i++){
                 if($scope.stus[i].ck && $scope.stus[i].state=='未发货'){
                        $scope.stus[i].state='已发货'   ;
                 }
             }
          }


          //全选
            $scope. All=function(){
               for(var i0;i<$scope.stus.length;i++){
                      $scope.stus[i].ck=$scope.flag;
               }
            }
          //添加
          $scope.add=function(){
             $scope.stus.push({
                id:i+1,
                   goods:"vivo",
                   name:"赵云",
                   shouji:1333333333,
                   price:2988,
                   chengshi:"上海",
                   rq:"08-22 10:00",
                   state:"未发货"
             })
          }


          })
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myctr">
       用户名:<input type="text" value="" placeholder="用户名搜索" ng-model="yh" />
       手机号:<input type="text" value="" placeholder="手机号搜索" ng-model="dh" />
       <select ng-model="xz">
           <option value="">选择城市</option>
           <option >上海</option>
           <option >重庆</option>
           <option >天津</option>
       </select>
       <select ng-model="ks">
           <option value="">开始月份</option>
           <option >1</option>
           <option >2</option>
           <option >3</option>
           <option >4</option>
           <option >5</option>
           <option >6</option>
           <option >7</option>
           <option >8</option>
           <option >9</option>
           <option >10</option>
           <option >11</option>
           <option >12</option>
       </select>
       <select ng-model="js">
           <option value="">结束月份</option>
           <option >1</option>
           <option >2</option>
           <option >3</option>
           <option >4</option>
           <option >5</option>
           <option >6</option>
           <option >7</option>
           <option >8</option>
           <option >9</option>
           <option >10</option>
           <option >11</option>
           <option >12</option>
       </select>
       <select ng-model="px">
                    <option value="" >ID排序</option>
                     <option value='+id' >正排序</option>
                     <option value='-id' >倒排序</option>

       </select>
       <br/>
       <button style="background-color:chartreuse" ng-click="add()">新增订单</button>
        <button style="background-color:chartreuse" ng-click="pl()">批量订单</button>
         <button style="background-color:chartreuse" ng-click="del()">批量删除</button>
           <table border="1px">
          <tr style="background-color: slategray;">
              <td><input type="checkbox" ng-model="flag" ng-click="All()"></td>
               <td>ID</td>
               <td>商品名</td>
               <td>用户名</td>
               <td>手机号</td>
               <td>价格</td>
               <td>城市</td>
               <td>下单时间</td>
               <td>状态</td>
               <td>操作</td>
          </tr>
          <tr ng-repeat="s in stus | filter:{name:yh, shouji:dh,chengshi:xz} | orderBy:px" " ng-show="yue(s.rq)">
          <td><input type="checkbox" ng-model="s.ck"></td>
             <td>{{s.id}}</td>
              <td>{{s.goods}}</td>
               <td>{{s.name}}</td>
                <td>{{s.shouji}}</td>
                 <td>{{s.price |currency:"RMB￥"}}</td>
                  <td>{{s.chengshi}}</td>
                   <td>{{s.rq | date:'MM-dd hh:mm'}}</td>
             <td>
             <span ng-if="s.state=='未发货'">
             <a href="#" ng-click="s.state='已发货'">{{s.state}}</a>

             </span>
                 <span ng-if="s.state=='已发货'">
                           已发货
                       </span>
             </td>
             <td><button ng-click="sc($index)" style="background-color: orange;">删除</button><input type="button" style="background-color: orange;" value="修改" ng-click="editUser($index)"/></td>
          </tr>
          </table>


   </body>

</html>