Angular + 增 + 删 + 改 + 查

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>必须过</title>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        
        <style type="text/css">
            select{
                height: 23px;
            }
            #tab1{
                width: 85%;
                text-align: center;
            }
            #div1{
                float: left;
                width: 40%;
            }
            #div2{
                float: left;
                
            }
            #btn1_:hover{
                background: red;
                border: 0 ;
            }
            
        </style>
    </head>
    <body ng-app="myapp" ng-controller="myctrl">
        <fieldset id="">
            <legend>练习3月考</legend>
            <input type="button" name="" id="btn1_" value="新增订单" ng-click="isshow=!isshow" />
            <input type="button" name="" id="" value="批量删除" ng-click="chaxun()"/>
            <input type="text" name="" id="" value="" placeholder="按手机号查询"title="按手机号查询" ng-model="chaxun_shouji"/>
            <input type="text" name="" id="" value="" placeholder="按商品名查询"title="按商品名查询" ng-model="chaxun_shangpin"/>
            <select name="" ng-model="zhuangtai_1">
                <option value="" >按状态查询</option>
                <option value="已发货"> ---已发货---</option>
                <option value="未发货"> ---未发货---</option>
            </select>
            <input type="button" name="" id="" value="全选" ng-click="quanxuan()"/>
            <input type="button" name="" id="" value="反选" ng-click="fanxuan()"/>
            <select name="" ng-model="odb">
                <option value="0">--按条件查询--</option>
                <option value="shijian">--按时间正序--</option>
                <option value="-shijian">--按时间倒叙--</option>
                <option value="jiage">--按价钱正序--</option>
                <option value="-jiage">--按价钱倒叙--</option>
            </select>
        </fieldset>
        
        <fieldset id="">
            <legend>表单</legend>
            
            <table border="1" cellspacing="0" cellpadding="0" id="tab1">
              <thead>
                  <tr>
                      <th><input type="checkbox" name="" id="" value="" /></th>
                      <th>ID <input type="button" name="" id="" value="排序" ng-click="orderby_id()"/></th>
                      <th>商品名</th>
                      <th>用户名</th>
                      <th>手机号</th>
                      <th>价格  <input type="button" name="" id="" value="排序" ng-click="orderby_jg()"/></th>
                      <th>城市</th>
                      <th>下单时间  <input type="button" name="" id="" value="排序" ng-click="orderby_xdsj()"/></th>
                      <th>状态</th>
                      <th>删除</th>
                      <th>修改</th>
                  </tr>
              </thead>
              <tbody>
                  <tr ng-repeat="x in addll|filter:{shangpin:chaxun_shangpin,shoujihao:chaxun_shouji,zhuangtai:zhuangtai_1}|orderBy:odb">
                      <td><input type="checkbox" name="" id="" value="{{$index}}" /></td>
                      <td>{{x.ID}}</td>
                      <td>{{x.shangpin}}</td>
                      <td>{{x.yonghu}}</td>
                      <td>{{x.shoujihao}}</td>
                      <td>{{x.jiage|currency:"RMB ¥"}}</td>
                      <td>{{x.chengshi}}</td>
                      <td>{{x.shijian|date:"yyyy-MM-dd HH:mm:ss"}}</td>
                      <td>{{x.zhuangtai}}</td>
                      <td><input type="button" name="" id="" value="删除" ng-click="update_(x.yonghu)" /></td>
                      <td><input type="button" name="" id="" value="修改" ng-click="xiugai_(x.yonghu)" /></td>
                  </tr>
              </tbody>
            </table>
        </fieldset>
        <div id="div0">
        <div id="div1">
            <fieldset id="fi1" ng-show="isshow">
            <legend>添加商品订单信息</legend>
            
            <!--添加页面//-->
            <table>
                <tr>
                    <td>id:</td>
                    <td><input type="text" name="" id="" value="" placeholder="ID" ng-model="ID_"/></td>
                    <td><span id="id_span"></span></td>
                </tr>
                <tr>
                    <td>商品名:</td>
                    <td><input type="text" name="" id="" value="" placeholder="商品名" ng-model="shangpin_"/></td>
                    <td><span id="shangpin_span"></span></td>
                </tr>
                <tr>
                    <td>用户:</td>
                    <td><input type="text" name="" id="" value="" placeholder="用户名" ng-model="yonghu_"/></td>
                    <td><span id="yonghu_span"></span></td>
                </tr>
                <tr>
                    <td>手机号:</td>
                    <td><input type="text" name="" id="" value="" placeholder="手机号" ng-model="shoujihao_"/></td>
                    <td><span id="shoujihao_span"></span></td>
                </tr>
                <tr>
                    <td>价格:</td>
                    <td><input type="text" name="" id="" value="" placeholder="价格" ng-model="jiage_"/></td>
                    <td><span id="jiage_span"></span></td>
                </tr>
                <tr>
                    <td>城市:</td>
                    <td>
                        <select name="" style="width: 160px;" id="" ng-model="chengshi_">
                            <option value="0">-地址-</option>
                            <option value="湖南">湖南</option>
                            <option value="山西">山西</option>
                        </select>
                    </td>
                    <td><span id="chengshi_span"></span></td>
                </tr>
                <tr>
                    <td>发货状态:</td>
                    <td><select name=""style="width: 160px;" ng-model="zhuangtai_">
                        <option value="0">-发货状态-</option>
                        <option value="未发货">已发货</option>
                        <option value="已发货">未发货</option>
                    </select></td>
                    <td><span id="zhuangtai_span"></span></td>
                </tr>
                <tr>
                    <td>下单时间:</td>
                    <td><input type="date" name="" id="" value="" ng-model="shijian_"/></td>
                    <td><span id="shijian_span"></span></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>
                        <button ng-click="baocun()">保存信息</button>
                    </td>
                    <td></td>
                </tr>
                </table>
                </fieldset>
            </div>
            
            <!--修改回显页面//-->
            <div id="div2">
                
            <fieldset id="" ng-show="xghx_">
                <legend>修改回显</legend>
            <table>
                <tr>
                    <td>id:</td>
                    <td><input type="text" name="" id="" value="" placeholder="ID" ng-model="ID_up"/></td>
                </tr>
                <tr>
                    <td>商品名:</td>
                    <td><input type="text" name="" id="" value="" placeholder="商品名" ng-model="shangpin_up"/></td>
                </tr>
                <tr>
                    <td>用户:</td>
                    <td><input type="text" name="" id="" value="" placeholder="用户名" ng-model="yonghu_up"/></td>
                </tr>
                <tr>
                    <td>手机号:</td>
                    <td><input type="text" name="" id="" value="" placeholder="手机号" ng-model="shoujihao_up"/></td>
                </tr>
                <tr>
                    <td>价格:</td>
                    <td><input type="text" name="" id="" value="" placeholder="价格" ng-model="jiage_up"/></td>
                </tr>
                <tr>
                    <td>城市:</td>
                    <td>
                        <select name="" style="width: 160px;" id="" ng-model="chengshi_up">
                            <option value="0">-地址-</option>
                            <option value="湖南">湖南</option>
                            <option value="山西">山西</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>发货状态:</td>
                    <td><select name=""style="width: 160px;" ng-model="zhuangtai_up">
                        <option value="0">-发货状态-</option>
                        <option value="已发货">已发货</option>
                        <option value="未发货">未发货</option>
                    </select></td>
                </tr>
                <tr>
                    <td>下单时间:</td>
                    <td><input type="date" name="" id="" value="" ng-model="shijian_up"/></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>
                        <button ng-click="xiugai_up()">修改信息</button>
                    </td>
                    <td></td>
                </tr>
            </table>
            </fieldset>
            </div>
            </div>
    
        
        <script type="text/javascript">
            var app=angular.module("myapp",[]);
            app.controller("myctrl",function($scope){
                $scope.isshow=false;
                $scope.xghx_=false;

                //定义数组
                $scope.addll=[
                {ID:6523,shangpin:"相机",yonghu:"有燕",shoujihao:13828521225,jiage:3296,chengshi:"沈阳",shijian:"2017-4-28 09:52:51",zhuangtai:"已发货"},
                {ID:2286,shangpin:"手机",yonghu:"金玉",shoujihao:13412598989,jiage:2988,chengshi:"河南",shijian:"2017-3-13 12:32:42",zhuangtai:"已发货"},
                {ID:2313,shangpin:"茶叶",yonghu:"小雅",shoujihao:16645211231,jiage:696 ,chengshi:"天津",shijian:"2017-3-28 09:00:24",zhuangtai:"未发货"},
                {ID:1024,shangpin:"电脑",yonghu:"彤彤",shoujihao:13824512395,jiage:7996,chengshi:"北京",shijian:"2017-3-12 06:32:31",zhuangtai:"已发货"}]
            
                //点击全选按钮
                $scope.quanxuan=function(){
                    var all_=$("input[type='checkbox']");
                         //设置循环
                         all_.each(function(){//each是循环的意思
                             $(this).prop("checked",true);//设置选中不选中的一个方法
                         })
                }
            
                //点击反选按钮
                $scope.fanxuan=function(){
                    var otall=$("input:checked");
                         otall.each(function(){//each是循环的意思
                             $(this).prop("checked",false);
                         })
                }
                
                //点击按钮排序
                $scope.isClick = true;//true为成员变量  为真走正序   反之走倒叙
                $scope.odb="";
                    //以ID为排序
                $scope.orderby_id=function(){
                        if ($scope.isClick) {
                            $scope.odb="ID";
                            $scope.isClick=false;
                        } else{
                            $scope.odb="-ID";
                            $scope.isClick=true;
                        }
                    }
                    //以价格排序
                $scope.orderby_jg=function(){
                    if ($scope.isClick) {
                            $scope.odb="jiage";
                            $scope.isClick=false;
                        } else{
                            $scope.odb="-jiage";
                            $scope.isClick=true;
                        }
                    }
                    //以时间排序
                $scope.orderby_xdsj=function(){
                    if ($scope.isClick) {
                            $scope.odb="shijian";
                            $scope.isClick=false;
                        } else{
                            $scope.odb="-shijian";
                            $scope.isClick=true;
                        }
                }
                    //点击删除一行
                $scope.update_=function(upda1){
                    for (var i = 0; i < $scope.addll.length; i++) {
                        if ($scope.addll[i].yonghu==upda1) {
                            $scope.addll.splice(i,1);
                            break;
                        }
                        
                    }
                }
                
                //点击批量删除
                
                //点击保存信息
                $scope.ID_="";
                $scope.shangpin_="";
                $scope.yonghu_="";
                $scope.shoujihao_="";
                $scope.jiage_="";
                $scope.chengshi_="0";
                $scope.shijian_="";
                $scope.zhuangtai_="0";
                //点击修改信息
                var str="";
                $scope.ID_up="";
                $scope.shangpin_up="";
                $scope.yonghu_up="";
                $scope.shoujihao_up="";
                $scope.jiage_up="";
                $scope.chengshi_up="0";
                $scope.shijian_up="";
                $scope.zhuangtai_up="0";
                //点击保存按钮之后进行判断
                $scope.baocun=function(){
                    var ID=$scope.ID_;
                    if (ID=="") {
                        $("#id_span").html("ID不能为空");
                        return;
                    } else{
                        $("#id_span").html("");
                    }
                    var shangpin=$scope.shangpin_;
                    if (shangpin=="") {
                        $("#shangpin_span").html("商品名不能为空");
                        return;
                    } else{
                        $("#shangpin_span").html("");
                    }
                     var yonghu=$scope.yonghu_;
                     if (yonghu=="") {
                         $("#yonghu_span").html("用户不能为空");
                         return;
                     } else{
                         $("#yonghu_span").html("");
                     }
                     var shoujihao=$scope.shoujihao_;
                     if (shoujihao=="") {
                         $("#shoujihao_span").html("手机号不能为空");
                         return;
                     } else{
                         $("#shoujihao_span").html("");
                     }
                     var jiage=$scope.jiage_;
                     if (jiage=="") {
                         $("#jiage_span").html("价格不能为空");
                         return;
                     } else{
                         $("#jiage_span").html("");
                     }
                     var chengshi=$scope.chengshi_;
                     if (chengshi==0) {
                         $("#chengshi_span").html("城市不能为空");
                         return;
                     } else{
                         $("#chengshi_span").html("");
                     }
                     var zhuangtai=$scope.zhuangtai_;
                     if (zhuangtai=="0") {
                         $("#zhuangtai_span").html("状态不能为空");
                         return;
                     } else{
                         $("#zhuangtai_span").html("");
                     }
                     var shijian=$scope.shijian_;
                     if (shijian=="") {
                         $("#shijian_span").html("时间不能为空");
                         return;
                     } else{
                         $("#shijian_span").html("");
                     }
                     //定义集合添加数据
                      var add_ll={}
                     add_ll.ID=$scope.ID_;
                     add_ll.shangpin=$scope.shangpin_;
                     add_ll.yonghu=$scope.yonghu_;
                     add_ll.shoujihao=$scope.shoujihao_;
                     add_ll.jiage=$scope.jiage_;
                     add_ll.chengshi=$scope.chengshi_;
                     add_ll.shijian=$scope.shijian_;
                     add_ll.zhuangtai=$scope.zhuangtai_;
                     $scope.addll.push(add_ll);
                    
                    
                    
                    
                    
                }
                
             //点击修改按钮之后
                $scope.xiugai_=function(up_yonghu){
                    $scope.xghx_=true;
                    for (var i = 0; i < $scope.addll.length; i++) {
                         if ($scope.addll[i].yonghu==up_yonghu) {
                             str=$scope.addll[i];
                             break;
                         }
                    }
                     $scope.ID_up=str.ID;
                     $scope.shangpin_up=str.shangpin;
                     $scope.yonghu_up=str.yonghu;
                     $scope.shoujihao_up=str.shoujihao;
                     $scope.jiage_up=str.jiage;
                     $scope.chengshi_up=str.chengshi;
                     $scope.shijian_up=str.shijian;
                     $scope.zhuangtai_up=str.zhuangtai;
                    
                    }
                //点击修改保存提交信息
                $scope.xiugai_up=function(){
                    
                     str.ID=$scope.ID_up;
                     str.shangpin=$scope.shangpin_up;
                     str.yonghu=$scope.yonghu_up;
                     str.shoujihao=$scope.shoujihao_up;
                     str.jiage=$scope.jiage_up;
                     str.chengshi=$scope.chengshi_up;
                     str.shijian=$scope.shijian_up;
                     str.zhuangtai=$scope.zhuangtai_up;
                    
                }
                //点击批量删除
                $scope.chaxun=function(){
                    var deall=$("input:checked");//选中的删除
                         for (var i = deall.length-1; i >=0; i--) {
                        //得到序号--从0开始
                        var index=deall[i].value;
                        //进行删除
                        $scope.addll.splice(index,1);
                    }
                }
                
             
             ///----///
            })
        </script>
    </body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值