查询

程序猿的使命
于 2017-10-26 09:40:51 发布
阅读量232
点赞数
本文链接：https://blog.csdn.net/l15210173802/article/details/78349495
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        select{
            height: 22px;
            border-radius: 5px;

        }
        input{
            border-radius: 5px;
            height: 20px;
        }
        button{
            background-color: green;
            border-radius: 5px;
            color: white;
            border:none;
        }
        tr{
            height: 30px;
        }
        th{
            padding-right: 20px;
            padding-left: 20px;
            line-height: 25px;
        }
        td{
            border: 1px solid black;
            font-weight: 600;
        }
        .span{
            padding-top: 10px;
            padding-left: 20px;
            font-weight: 600;
            padding-right: 10px;
        }
        li{
            margin-left: 20px;
        }

    </style>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.data=[
                {"chack":false,"ID":"1","name":"iPhone4","username":"张三","tel":"15111111111","price":4999,"city":"北京","datatime":"08-01 10:00","status":true},
                {"chack":false,"ID":"2","name":"小米6","username":"李四","tel":"152222222222","price":2999,"city":"上海","datatime":"08-02 10:00","status":true},
                {"chack":false,"ID":"3","name":"华为p9","username":"王五","tel":"15333333333","price":3999,"city":"天津","datatime":"08-03 10:00","status":false},
                {"chack":false,"ID":"4","name":"OPPO R11","username":"赵六","tel":"154444444444","price":4999,"city":"重庆","datatime":"09-04 10:00","status":null},
                {"chack":false,"ID":"5","name":"VIVO","username":"周七","tel":"1566666666666","price":2999,"city":"深圳","datatime":"10-04 10:00","status":false}
            ];
            //城市查找
            $scope.citysize="选择城市";
            $scope.cityFun=function(item){
                //return true;
                if($scope.citysize!="选择城市"){
                    if($scope.citysize==item.city){
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return true;
                }
            };
            //状态查找
            $scope.statussize="选择状态";
            $scope.statusFun=function(item){
                //return false;
                if($scope.statussize!="选择状态"){
                    if(item.status==true&&$scope.statussize=="待发货"){
                        return true;
                    }else if(item.status==null&&$scope.statussize=="已收货"){
                        return true;
                    }else if(item.status==false&&$scope.statussize=="已发货"){
                        return true;
                    }
                }else{
                    return true;
                }
            };
            //全选，反选
            $scope.checkBtn=false;
            $scope.checkAll=function(){
                console.log($scope.checkBtn);
                if($scope.checkBtn==true){
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].chack=true;
                    }
                }else{
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].chack=false;
                    }
                }
            }
            //计数功能
            var n=0;
            $scope.fx=function(index){
                //console.log(index);
                if($scope.data[index].check==true){
                    n++;
                }else{
                    n--;
                }
                console.log(n);
                if(n==$scope.data.length){
                    $scope.checkBtn=true;
                }else{
                    $scope.checkBtn=false;
                }
            };
            //添加
            $scope.addup=function () {
                $scope.a=true;
            }
            $scope.addpush=function () {
                $scope.data.push({
                    ID:$scope.data.length+1,
                    name: $scope.newname,
                    username: $scope.newusername,
                    tel: $scope.newtel,
                    price: 3999,
                    city:$scope.xuanze,
                    chack: false,
                    datatime:"10-25 12:00",
                    status:true

                });
                $scope.a=false;
            }
            //批量删除
            $scope.delect=function(){
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.data[i].chack==true){
                        $scope.data.splice(i,1);
                        i--;
                    }
                }
            };
            //批量发货
            $scope.setstatus=function(){
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.data[i].status==true&&$scope.data[i].chack==true){
                        $scope.data[i].status=false;
                    }
                }
            };
            $scope.dianji=function (index) {
                for(var i=0;i<$scope.data.length;i++){
                    $scope.data[index].status=false;
                }
            }
            /*排序功能的实现*/
            $scope.namenext="";
            $scope.clickid=function (b,c,d) {
                $scope.b=true;
                $scope.c=false;
                $scope.d=false;
            }
            $scope.clickprice=function (b,c,d) {
                $scope.b=false;
                $scope.c=true;
                $scope.d=false;
            }
            $scope.clickdatatime=function (b,c,d) {
                $scope.b=false;
                $scope.c=false;
                $scope.d=true;
            }

        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" placeholder="用户名搜索" ng-model="namesou"><input type="text" placeholder="手机号搜索" ng-model="telsou">
<select ng-model="citysize">
    <option>选择城市</option>
    <option>北京</option>
    <option>天津</option>
    <option>上海</option>
    <option>重庆</option>
    <option>深圳</option>
</select>
<select ng-model="statussize">
    <option>选择状态</option>
    <option>待发货</option>
    <option>已发货</option>
    <option>已收货</option>
</select>
<select>
    <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>
</select>
<span>-</span>
<select>
    <option>结束月份</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>
<button ng-click="addup()" style="margin-top: 10px;margin-bottom: 10px;">新增订单</button>
<button ng-click="setstatus()" style="margin-top: 10px;margin-bottom: 10px;">批量发货</button>
<button ng-click="delect()" style="margin-top: 10px;margin-bottom: 10px;">批量删除</button>
<table>
    <thead style="background-color: dimgray">
    <tr>
        <th><input type="checkbox" ng-model="checkBtn" ng-click="checkAll()"></th>
        <th>ID<button ng-click="clickid()" style="font-size: 12px; height: 17px">排序</button></th>
        <th>商品名</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>价格<button ng-click="clickprice()" style="font-size: 12px; height: 17px">排序</button></th>
        <th>城市</th>
        <th>下单时间<button ng-click="clickdatatime()" style="font-size: 12px; height: 17px">排序</button></th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:{username:namesou}|filter:{tel:telsou}|filter:cityFun|filter:statusFun|orderBy:clickprice($b):clickid($c):clickdatatime($d)">
        <td><input type="checkbox" ng-model="item.chack" ng-click="fx($index)"></td>
        <td ng-model="ID">{{item.ID}}</td>
        <td>{{item.name}}</td>
        <td>{{item.username}}</td>
        <td>{{item.tel}}</td>
        <td ng-model="price">{{item.price|currency:'￥'}}</td>
        <td>{{item.city}}</td>
        <td ng-model="datatime">{{item.datatime}}</td>
        <td><a href="#"ng-if="item.status==true" ng-click="dianji($index)">发货</a><span ng-if="item.status==null">已收货</span><span ng-if="item.status==false">已发货</span></td>
    </tr>
    </tbody>
</table>
<div style="margin: 0 auto;width: 350px;height: 450px;border: 1px solid black" ng-show="a==true">
    <span class="span">新增订单</span><br><br>
    <span class="span">商品名</span><input type="text" ng-model="newname" placeholder="6-20个字符"><br>
    <span class="span">用户名</span><input type="text" ng-model="newusername" placeholder="4-16个字符"><br>
    <span class="span">手机号</span><input type="number" ng-model="newtel"><br>
    <span class="span">城市</span>
    <select ng-model="xuanze">
        <option>选择城市</option>
        <option>北京</option>
        <option>天津</option>
        <option>上海</option>
        <option>重庆</option>
        <option>深圳</option>
    </select><br>
    <ul style="background-color: lightpink;border: 1px solid  white;padding: 20px;margin-left: 20px;margin-right: 20px;border-radius: 5px;width: 250px">
        <li>商品名不能为空！</li>
        <li>商品名必须是6-20个字符！</li>
        <li>用户名不能为空</li>
        <li>用户名必须是4-16个字符！</li>
        <li>手机号不能为空！</li>
        <li>手机号格式不正确！</li>
        <li>请选择城市！</li>
    </ul>
    <button ng-click="addpush()" style="margin-left: 50px">提交</button>
</div>
</body>
</html>
程序猿的使命
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
查询

html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> table{ border-collapse: collapse; } select{ height: 22px; b
复制链接

扫一扫