AngularJS全

来源：互联网发布：蜜桃影院充值app源码编辑：程序博客网时间：2024/04/29 15:12

<!DOCTYPE html>

<html>
   <head>
       <meta charset="utf-8" />
       <title>月考练习</title>
       <script src="js/angular.min.js"></script>
       <style>
       table tr:nth-child(odd){
           background: #999999;
       }
       table tr:nth-child(even){
           background: wheat;
       }
       </style>
       <script>
           angular.module("wuApp",[])
           .controller("demoa",function($scope){
               $scope.list=[
               {id:7,sname:"OPPO R9S",yname:"关羽",   tel:"15777777777",price:4999,city:"北京",xdate:"03-09 10:00",huo:"发货",state:false},
               {id:12,sname:"VIVO X20",yname:"刘备",   tel:"15877777777",price:5999,city:"上海",xdate:"08-09 10:00",huo:"发货",state:false},
               {id:1,sname:"OPPO R9S",yname:"张飞",   tel:"15977777777",price:6999,city:"天津",xdate:"01-09 10:00",huo:"发货",state:false},
               {id:11,sname:"OPPO R9S",yname:"黄忠",   tel:"15577777777",price:7999,city:"江苏",xdate:"04-09 10:00",huo:"发货",state:false},
               {id:10,sname:"OPPO R9S",yname:"黄盖",   tel:"15677777777",price:8999,city:"重庆",xdate:"12-12 10:00",huo:"发货",state:false},
               {id:9,sname:"OPPO R9S",yname:"周瑜",   tel:"15477777777",price:9999,city:"上海",xdate:"05-09 10:00",huo:"发货",state:false},
               {id:8,sname:"OPPO R9S",yname:"大乔",   tel:"15177777777",price:14999,city:"天津",xdate:"09-09 10:00",huo:"发货",state:false},
               {id:2,sname:"OPPO R9S",yname:"貂蝉",   tel:"15277777777",price:24999,city:"北京",xdate:"11-09 10:00",huo:"发货",state:false},
               {id:3,sname:"OPPO R9S",yname:"小乔",   tel:"15377777777",price:34999,city:"重庆",xdate:"06-09 10:00",huo:"发货",state:false}
               ];

               $scope.title="id";
               $scope.desc=true;
               //全选
               $scope.checkall=function(){
                   var ck = $scope.ck;

                   for(var i=0;i<$scope.list.length;i++){
                       $scope.list[i].state=ck;
                   }
               }

               //改变发货
               $scope.fahuo=function(li){

                   li.huo="已发货";

               }

               $scope.dian=function(){
                   alert("请输入姓名!")
               }
               //删除的方法
               $scope.del=function(li){
                   $scope.list.splice(li,1);

               }
               //批量删除
               $scope.shanchu=function(){

                   for(var i=0;i<$scope.list.length;i++){
                       if($scope.list[i].state){
                           $scope.list.splice(i,1);
                           i--;
                       }
                   }

               }
               //批量发货状态
               $scope.pifa=function(){
                   for(var i=0;i<$scope.list.length;i++){
                       if($scope.list[i].state){
                           $scope.list[i].huo="已发货";
                       }
                   }

               }
               //添加数据
               $scope.id="";
               $scope.aa="";
               $scope.bb="";
               $scope.c="";
               $scope.d="";
               $scope.e="";
               $scope.f="";

               $scope.add=function(){
                   $scope.newlist=
                   {id:$scope.id,
                   sname:$scope.aa,
                   yname:$scope.bb,
                   tel:$scope.c,
                   price:$scope.d,
                   city:$scope.e,
                   xdate:$scope.f,
                   huo:"发货",
                   state:false
                   };

               $scope.list.push($scope.newlist);
               $scope.edit=false;
               }

               //隐藏显示添加表
               $scope.edit=false;
               $scope.bian=function(){
                   $scope.edit=true;
               }

               //筛选月份
               $scope.start="开始月份";
                   $scope.end="结束月份";
               $scope.pan=function(i){
                   var dd =$scope.list[i].xdate ;
                   var mm = parseInt(dd.split("-")[0]);

                   if($scope.start=="开始月份"||$scope.end=="结束月份"){
                       return true;
                   }else{
                       var start = parseInt($scope.start);
                       var end = parseInt($scope.end);
                       if(mm>=start&&mm<=end){
                           return true;
                       }else{
                           return false;
                       }
                   }


               }

               $scope.orderbr=function(){
                   var t = $scope.order;
                   if(t=="1"){
                       $scope.title="huo";
                       $scope.desc=true;
                   }
               }

           });
       </script>
   </head>
   <body ng-app="wuApp" ng-controller="demoa">

       <input type="text" placeholder="用户名搜索" ng-model="a" ng-click="dian()"/>
       <input type="text" placeholder="手机号搜索" ng-model="b"/>
       <select ng-model="abc">
           <option value="">选择城市</option>
           <option value="上海">上海</option>
           <option value="江苏">江苏</option>
           <option value="重庆">重庆</option>
           <option value="天津">天津</option>
       </select>
       <select ng-model="order" ng-change="orderbr()">
           <option value="">选择状态</option>
           <option value="1">发货</option>
           <option value="2">已发货</option>
       </select>
       <select ng-model="start">
           <option>开始月份</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="end">
           <option>结束月份</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>
       <button>查询</button><br /><br />

       <button ng-click="bian()">新增订单</button>
       <button ng-click="pifa()">批量发货</button>
       <button ng-click="shanchu()">批量删除</button><br /><br />
       <table border="1" style="width: 800px;text-align: center;">
           <thead>
               <tr style="background: #999999;">
               <th><input type="checkbox" ng-model="ck" ng-click="checkall()"/></th>
               <th ng-click="title='id';desc=!desc">ID</th>
               <th ng-click="title='sname';desc=!desc">商品名</th>
               <th ng-click="title='yname';desc=!desc">用户名</th>
               <th ng-click="title='tel';desc=!desc">手机号</th>
               <th ng-click="title='price';desc=!desc">价格</th>
               <th ng-click="title='city';desc=!desc">城市</th>
               <th ng-click="title='xdate';desc=!desc">下单时间</th>
               <th>状态</th>
               <th>操作</th>
               </tr>
               </thead>
               <tbody>
               <tr ng-repeat="li in list |filter:{'yname':a,'tel':b,'city':abc}|orderBy:title:desc" ng-if="pan($index)" style="height: 40px;">
                   <td><input type="checkbox" ng-model="li.state"/></td>
                   <td>{{li.id}}</td>
                   <td>
                       <span ng-hide="li.xiu" >{{li.sname}}</span>
                       <span ng-show="li.xiu==true"><input ng-model="li.sname"/></span>
                       </td>
                   <td>{{li.yname}}</td>
                   <td>{{li.tel}}</td>
                   <td>{{li.price|currency:"￥"}}</td>
                   <td>{{li.city}}</td>
                   <td>{{li.xdate|date:"mm-dd HH:MM"}}</td>
                   <td >
                       <span ng-show="li.huo=='已发货'">{{li.huo}}</span>
                       <span><a ng-show="li.huo=='发货'" ng-click="fahuo(li)" href="#">{{li.huo}}</a></span>
                       </td>
                   <td>
                       <span><a href="" ng-hide="li.xiu" ng-click="li.xiu=true">修改</a></span>
                       <span><a href="" ng-show="li.xiu==true"ng-click="li.xiu=false">保存</a></span> <a href="#" ng-click="del($index)">删除</a> </td>
               </tr>
           </tbody>
       </table><br /><br />
       <table border="1" style="width: 300px;margin-left: 30px;" ng-show="edit">
           <tr>
               <td>id:</td>
               <td><input type="text" ng-model="id"/></td>

           </tr>
           <tr>
               <td>商品名:</td>
               <td><input type="text" ng-model="aa"/></td>
           </tr>
           <tr>
               <td>用户名:</td>
               <td><input type="text" ng-model="bb"/></td>
           </tr>
           <tr>
               <td>手机号:</td>
               <td><input type="text" ng-model="c"/></td>
           </tr>
           <tr>
               <td>价格:</td>
               <td><input type="text" ng-model="d"/></td>
           </tr>

           <td>城市:</td>
               <td><input type="text" ng-model="e"/></td>
           </tr>

           <td>下单时间:</td>

               <td><input type="text" ng-model="f"/></td>

           <tr>
               <td colspan="2" align="center"><button ng-click="add()" >添加</button> </td>
           </tr>
       </table>

   </body>
</html>

阅读全文

0 0