AngularJS一筛选，添加、过滤

最新推荐文章于 2022-04-26 10:06:03 发布

春风十里桃花开

最新推荐文章于 2022-04-26 10:06:03 发布

阅读量812

点赞数

分类专栏：混合开发文章标签： AngularJs

本文链接：https://blog.csdn.net/wanleiSuper/article/details/78348828

版权

混合开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td,th{
            padding: 10px;
            border: 1px solid #000;
            text-align: center;
        }
    </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=[{
                id:1,
                name:"zs",
                age:"20",
                date:"1508927457128"
            },{
                id:2,
                name:"ls",
                age:"24",
                date:"1506927457128"
            },{
                id:3,
                name:"ww",
                age:"30",
                date:"1488927457128"
            }];
            $scope.add=function(){
                console.log(0);
                $scope.data.push({
                    id:$scope.data.length+1,
                    name:$scope.name,
                    age:$scope.age,
                    date:new Date()*1
                });
            };

            //变成时间戳的方法
//            var str = '2017/10/25';
//            //str = str.replace(/-/g,'/');
//            var date = new Date(str);
//            var time = date.getTime();
//            console.log(time);
            $scope.month1="--开始月份--";
            $scope.month2="--结束月份--";
            $scope.filt=function(item){
                //return false;
                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>
    <script src="../ionic/shop/shop/0755116074909/js/app.js"></script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<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>
<table>
    <thead>
        <tr>
            <th ng-click="sort('id')">序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th ng-click="sort('data')">时间</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in data|filter:filt|orderBy:sortColumn:revers">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.date|date:"yyyy-MM-dd hh时mm分ss秒"}}</td>
        </tr>
    </tbody>
</table>
<h2>添加新项目</h2>
<table>
    <thead>
        <tr>
            <td>姓名</td>
            <td><input type="text" ng-model="name"></td>
        </tr>
        <tr>
            <td>年龄</td>
            <td><input type="text" ng-model="age"></td>
        </tr>
        <tr>
            <td colspan="2"><button ng-click="add()">按钮</button></td>
        </tr>
    </thead>
</table>
</body>
</html>

春风十里桃花开

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS一筛选，添加、过滤

Title table{ border-collapse: collapse; } td,th{ padding: 10px; border: 1px solid #000; text-align: center; }
复制链接

扫一扫