moni1

来源：互联网发布：合肥编程培训班编辑：程序博客网时间：2024/06/06 02:35

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid black;
            background: gray;
        }
        td{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid black;
        }
        .red
        {
            border: 1px solid red;
            color: red;
        }
    </style>
    <script src="../angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("MysCtrl",function ($scope) {
            $scope.items=[
                { ID:1,shopname:'小米6',name:"张三",call:'19876542',price:4955,city:"北京",date:"1508927457128",state:"已发货",check:false},
                { ID:2,shopname:'华为P9',name:"李四",call:'18653555',price:2141,city:"上海",date:"1506927457128",state:"发货",check:false},
                { ID:3,shopname:'OPPO R11',name:"王五",call:'17562545',price:3200,city:"广州",date:"1488927457128",state:"已发货",check:false},
                { ID:4,shopname:'VIVO X9',name:"小米",call:'17524633',price:1999,city:"天津",date:"1688927457128",state:"发货",check:false},
                { ID:5,shopname:'Iphone8',name:"小张",call:'12345698',price:6810,city:"武汉",date:"1488927457128",state:"已发货",check:false}
            ];
            //点击城市查询
            $scope.key_city="请选择";
            $scope.myCity=function (item) {
                console.log(item);
                if($scope.key_city!="请选择"){
                     if($scope.key_city==item.city){
                         return true;
                     }else{
                         return false;
                     }
                }else {
                    return true;
                }
            };
            //点击查询选中
            $scope.key_xuan="选择状态";
            $scope.myXuan=function (item) {
                if($scope.key_xuan!="选择状态"){
                    if($scope.key_xuan==item.state){
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return true;
                }
            };
            //点击改变
            $scope.changes=function (index) {
                if($scope.items[index].state=="发货"){
                    $scope.items[index].state="已发货";
                }
            };
            //过滤敏感字
            $scope.search="";
            $scope.search2="";
            $scope.$watch("search",function (value) {
                if(value.indexOf("法轮功")!=-1){
                    alert("您输入的是敏感字!");
                    $scope.search="";
                }else{
                    $scope.search2=$scope.search;
                }
            });
            //按价格排序
            $scope.revers=false;
            $scope.sortPrice="请选择";
            $scope.finds=function () {
                if($scope.sortPrice!="请选择"){
                    if($scope.sortPrice=="价格正序"){
                        $scope.revers=true;
                    }else if($scope.sortPrice=="价格倒序"){
                        $scope.revers=false;
                    }
                }
            };
          //添加

            $scope.adds=function () {
                $scope.showAdd=true;
            };
            $scope.showAdd=false;
            $scope.redcheck=false;
            $scope.keys_shopname="",
            $scope.keys_name="";
            $scope.keys_num="";
            $scope.keys_xuan="请选择";
            $scope.yes=function () {
//                if($scope.keys_shopname==""||$scope.keys_shopname==null){
//                    alert("输入的内容不能为空");
//                }else{
//                    for(var i=0;i<$scope.items.length;i++){
//                        if($scope.keys_shopname==$scope.items[i].name){
//                            alert("以存在");
//                            $scope.keys_shopname="";
//                            $scope.keys_name="";
//                            $scope.keys_num="";
//
//                            return;
//                        }
//                    }
//                }

                if($scope.keys_shopname==""|| $scope.keys_shopname.length<6 || $scope.keys_shopname.length>20 )
                {
                   /* $scope.showAdd=true*/;
                    $scope.redcheck=true;
                }else{
                //添加
                $scope.items.push({
                    ID:$scope.items.length+1,
                    shopname:$scope.keys_shopname,
                    name: $scope.keys_name,
                    call:$scope.keys_num,
                    city:$scope.keys_xuan,
                    date:new Date()*1,
                    state:"发货"
                });
                }
//                $scope.showAdd=false;
            }
           //按月份查询
            $scope.month1="--开始月份--";
            $scope.month2="--结束月份--";
            $scope.filt=function (item) {
                if($scope.month1!="--开始月份--"&&$scope.month2!="--结束月份--"){
                    if(parseInt($scope.month1)>parseInt($scope.month2)){
                        alert("选错了")
                    }else{
                        console.log("过滤");
                        var str1="2017/"+$scope.month1+"/01";
                        $scope.time1=new Date(str1).getTime();
                        var str2="2017/"+(parseInt($scope.month2)+1)+"/01";
                        $scope.time2=new Date(str2).getTime();
                        if(item.date<$scope.time1||item.date>=$scope.time2){
                            return false;
                        }else{
                            return true;
                        }
                    };

                }else{
                    return true;
                }
            };
            //排序
            $scope.sortColumn="id";
            $scope.revers=false;
            $scope.sort=function(column){
                //console.log(column);
                if($scope.sortColumn==column){
                    $scope.revers=!$scope.revers;
                }
                $scope.sortColumn=column;
            }

})
</script>
</head>
<body ng-app="myapp" ng-controller="MysCtrl">

<input type="text" ng-model="key_name" placeholder="用户名搜索">
<input type="text" ng-model="key_call" placeholder="手机号搜索">
<input type="text" ng-model="search" placeholder="模糊查询过滤敏感字">
<select ng-model="key_city">
    <option>请选择</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>天津</option>
    <option>武汉</option>
</select>
<select ng-model="key_xuan">
    <option>选择状态</option>
    <option>发货</option>
    <option>已发货</option>
</select>
<select ng-model="sortPrice" ng-change="finds()">
    <option>请选择</option>
    <option>价格正序</option>
    <option>价格倒序</option>
</select>
<span>按时间搜索</span>
<select ng-model="month1">
    <option>--开始月份--</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>
<select ng-model="month2">
    <option>--结束月份--</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>
<button ng-click="adds()" style="background: green">添加</button>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="AllChecked" ng-click="CheckedAll()"></th>
        <th>ID<button ng-click="sort('ID')" style="background: green">排序</button></th>
        <th>商品名</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>价格<button ng-click="sort('price')" style="background: green">排序</button></th>
        <th>城市</th>
        <th>下单时间<button ng-click="sort('date')" style="background: green">排序</button></th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="x in items|filter:search2|filter:{name:key_name}|filter:{call:key_call}|filter:myCity|filter:myXuan|filter:filt|orderBy:'price':revers">
        <td><input type="checkbox" ng-model="x.check" ng-click="ItemsChecked()"></td>
        <td>{{x.ID}}</td>
        <td>{{x.shopname}}</td>
        <td>{{x.name}}</td>
        <td>{{x.call}}</td>
        <td>{{x.price}}</td>
        <td>{{x.city}}</td>
        <td>{{x.date|date:"yyyy-MM-dd hh时mm分ss秒"}}</td>
        <td ng-click="changes($index)">{{x.state}}</td>
    </tr>
    </tbody>
</table>
<div ng-show="showAdd">
    <input type="text" ng-model="keys_shopname"placeholder="请输入商品名字" ng-class="{red:redcheck}">
    <input type="text" ng-model="keys_name"placeholder="请输入用户名" ng-class="{red:redcheck}">
    <input type="text" ng-model="keys_num"placeholder="请输入手机号" ng-class="{red:redcheck}">
    <select ng-model="keys_xuan">
        <option>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>天津</option>
        <option>武汉</option>
    </select>
    <button ng-click="yes()">提交</button>
</div>
</body>
</html>

阅读全文

0 0