增删改查

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="lib/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                window.setInterval(function(){
                    $("tr:even").css("background-color","red")
                    $("tr:odd").css("background-color","green")
                })
            })
            angular.module("jun",[])
//            .filter("cc",function(){
//                return function(input){
//                    var v=input.replace(/米/g,'*');
//                    return v;
//                }
//            })
            .controller("dd",function($scope){
                $scope.showadd=false;
                $scope.title="state";
                $scope.desc=false;
                $scope.goods=[];
                for(var i=0;i<12;i++){
                    var g={
                        "checked":false,
                        "id":i,
                        "name":"三星"+i,
                        "username":"军"+i,
                        "tel":"1100023",
                        "price":i,
                        "city":"北京",
                        "time":new Date("0"+i+"-09 10:00"),
                        "state":"发货"
                    }
                    var g2={
                        "checked":true,
                        "id":i,
                        "name":"米为"+i,
                        "username":"军"+i,
                        "tel":"11000555",
                        "price":i,
                        "city":"山西",
                        "time":new Date("0"+i+"-09 10:00"),
                        "state":"已发货"
                    }
                    $scope.goods.push(g);
                    $scope.goods.push(g2);
                }    
                $scope.add=function(){
                        
                }
                $scope.allck=function(){
                    var ck=$scope.isck;
                    for(var i=0;i<$scope.goods.length;i++){
                        $scope.goods[i].checked=ck;
                    }
                }
                $scope.delAll=function(){
                    var b=false;
                    for(var i=0;i<$scope.goods.length;i++){
                            if($scope.goods[i].checked==true){
                                b=true;
                                break;
                            }
                        }
                    if(b==true){
                        for(var i=0;i<$scope.goods.length;i++){
                            if($scope.goods[i].checked==true){
                                $scope.goods.splice(i,1);
                                i--;
                            }
                        }    
                    }else{
                        alert("圈定删除吗")
                    }
                    
                }
                $scope.del=function(g){
                    for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].id==g.id){
                            alert("圈定删除吗")
                            $scope.goods.splice(i,1);
                        }
                    }
                }
                $scope.fhAll=function(){
                    for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].checked==true){
                            $scope.goods[i].state="已发货"
                        }
                    }
                }
                $scope.bc=function(){
                    $scope.tips=false;
                    $scope.valueAll=[];
                    if($scope.name==undefined||$scope.name==""){
                        $scope.valueAll.push("商品名不能为空");
                    }else if(!($scope.name.length>2&&$scope.name.length<20)){
                        $scope.valueAll.push("商品名长度在2-10之间");
                    }
                    if($scope.username==undefined||$scope.username==""){
                        $scope.valueAll.push("用户名不能为空");
                    }else if(!($scope.username.length>2&&$scope.username.length<20)){
                        $scope.valueAll.push("用户名长度在2-10之间");
                    }
                    if($scope.city==undefined||$scope.city==""){
                        $scope.valueAll.push("地址不能为空");
                    }
                    if(!/^\d+$/.test($scope.price)){
                        $scope.valueAll.push("价格必须为有效数字");
                    }
                    
                    if($scope.valueAll.length>0){
                        $scope.tips=true;
                    }else{
                        var g2={
                            "checked":false,
                            "id":$scope.id,
                            "name":$scope.name,
                            "username":$scope.username,
                            "tel":$scope.tel,
                            "price":$scope.price,
                            "city":$scope.city,
                            "time":$scope.time,
                            "state":"发货"
                        }
                        $scope.goods.push(g2);
                        $scope.showadd=false;
                    }
                }
                $scope.orderby=function(){
                    var t=$scope.ordertype;
                    if(t=="1"){
                        $scope.title='price'
                        $scope.desc=false;
                    }else if(t=="2"){
                        $scope.title='price'
                        $scope.desc=true;
                    }else if(t=="3"){
                        $scope.title='time'
                        $scope.desc=false;
                    }else if(t=="4"){
                        $scope.title='time'
                        $scope.desc=true;
                    }
                }
            })
            
        </script>
    </head>
    <body ng-app="jun" ng-controller="dd">
        <input placeholder="商品名搜索" ng-model="nameFilter"/>
        <input placeholder="用户名搜索" ng-model="usernameFilter"/>
        <input placeholder="手机号搜索" ng-model="telFilter"/>
        <input placeholder="城市搜索" ng-model="cityFilter"/>
        <select ng-model="ordertype" ng-change="orderby()">
            <option value="">----请选择----</option>
            <option value="1">价格升序</option>
            <option value="2">价格降序</option>
            <option value="3">生产日期升序</option>
            <option value="4">生产日期降序</option>
        </select>
        <!--<select ng-model="cityFilter">
            <option>请选择城市</option>
            <option>北京</option>
            <option>山西</option>
            <option>陕西</option>
        </select>
        <select ng-model="stateFilter">
            <option>请选择状态</option>
            <option>发货</option>
            <option>已发货</option>
        </select>
        <select ng-model="timeFilter1">
            <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="timeFilter2">
            <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>
        <input type="button" value="查询" />-->
        <br />
        <br />
        <button ng-click="showadd=true">新增订单</button>
        <button ng-click="fhAll()">批量发货</button>
        <button ng-click="delAll()">批量删除</button>
        敏感字:米(商品名)-->替换成 *
        <br />
        <br />
        <table border="1px" cellspacing="1px" cellpadding="1px">
            <tr>
                <th>
                    <input type="checkbox" ng-change="allck()" ng-model="isck"/>
                </th>
                <th ng-click="title='id';desc=!desc">
                    ID
                </th>
                <th ng-click="title='name';desc=!desc">
                    商品名
                </th>
                <th ng-click="title='username';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='time';desc=!desc">
                    下单时间
                </th>
                <th>
                    状态
                </th>
                <th>
                    操作
                </th>
            </tr>
            <tr ng-repeat="good in goods|orderBy:title:desc|filter:usernameFilter|filter:telfilter|filter:cityfilter">
                <td>
                    <input type="checkbox" ng-model="good.checked"/>
                </td>
                <td>
                    {{good.id}}
                </td>
                <td>
                    <span ng-hide="good.edit">
                        {{good.name}}    
                    </span>
                    <span ng-show="good.edit==true">
                        <input ng-model="good.name" />
                    </span>
                </td>
                <td>
                    <span ng-hide="good.edit">
                        {{good.username}}
                    </span>
                    <span ng-show="good.edit==true">
                        <input ng-model="good.username" />
                    </span>
                </td>
                <td>
                    <span ng-hide="good.edit">
                        {{good.tel}}    
                    </span>
                    <span ng-show="good.edit==true">
                        <input ng-model="good.tel" />
                    </span>
                </td>
                <td>
                    <span ng-hide="good.edit">
                        {{good.price|currency:"¥ "}}
                    </span>
                    <span ng-show="good.edit==true">
                        <input ng-model="good.price" />
                    </span>
                </td>
                <td>
                    <span ng-hide="good.edit">
                        {{good.city}}
                    </span>
                    <span ng-show="good.edit==true">
                        <input ng-model="good.city" />
                    </span>
                </td>
                <td>
                    {{good.time|date:"yyyy年MM月dd日  hh时mm分ss秒"}}                    
                </td>
                <td>
                    <span ng-show="good.state=='已发货'">
                        {{good.state}}
                    </span>
                    <span ng-show="good.state=='发货'">
                        <a href="" ng-click="good.state='已发货'">
                            {{good.state}}
                        </a>
                    </span>
                </td>
                <td>
                    <a href="" ng-hide="good.edit" ng-click="good.edit=true">修改</a>
                    <a href="" ng-show="good.edit==true" ng-click="good.edit=false">保存</a>
                    <a href="" ng-click="del(good)">删除</a>
                </td>
            </tr>
        </table>
        <form ng-show="showadd">
            商品名
            <input ng-model="name" />
            <br />
            用户名
            <input ng-model="username" />
            <br />
            手机号
            <input ng-model="tel" />
            <br />
            价格
            <input ng-model="price" />
            <br />
            城市
            <input ng-model="city" />
            <br />
            下单时间
            <input ng-model="time" />
            <br />
            状态
            <input ng-model="state" />
            <br />
            <div>
                <ul>
                    <li ng-repeat="c in valueAll">
                        {{c}}
                    </li>
                </ul>
            </div>
            <button ng-click="bc()">保存</button>
        </form>
    </body>
</html>

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值