日程表

最新推荐文章于 2022-04-25 11:29:34 发布

gh323093

最新推荐文章于 2022-04-25 11:29:34 发布

阅读量809

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78513975

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        //模拟数据
        var data = {
            user:"李四",
            items:[
                {action:"约刘诗诗吃饭",done:false},
                {action:"约刘诗诗跳舞",done:false},
                {action:"约刘诗诗敲代码",done:true},
                {action:"约刘诗诗爬长城",done:false},
                {action:"约刘诗诗逛天坛",done:false},
                {action:"约刘诗诗看电影",done:false}
            ]
        };
        var myapp=angular.module("myapp",[]);
        myapp.filter("todo",function(){
            return function(a,flag){
                var arr=[];
                for(var i=0;i<a.length;i++){
                    if(a[i].done==false){
                        arr.push(a[i])
                    }else{
                        if(flag==true){
                            arr.push(a[i])
                        }
                    }
                }
                return arr;
            }
        });
        myapp.controller("myCtrl",function($scope){
            $scope.data=data;
            $scope.complate=false;
            //计算数；两
            $scope.count=function(){
                var n=0;
                for(var i=0;i<$scope.data.items.length;i++){
                    if($scope.data.items[i].done==false){
                        n++;
                    }
                }
                return n;
            };
            //
            $scope.addItem=function(){
                $scope.data.items.push({'action':$scope.add,'done':false});
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>{{data.user}}的日程表<span>{{count()}}</span></h1>
<input type="text" ng-model="add"><button ng-click="addItem()">添加</button>
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>日程</th>
        <th>完成</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data.items|todo:complate">
        <td>{{$index}}</td>
        <td>{{item.action}}</td>
        <td><input type="checkbox" ng-model="item.done"></td>
    </tr>
    </tbody>
</table>
<div>显示全部<span><input type="checkbox" ng-model="complate"></span></div>
</body>
</html>



第二个查询
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000;
        }
        .top{
            display: inline-block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top:10px solid red;
        }
        .bot{
            display: inline-block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom:10px solid red;
        }
    </style>

    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function($scope){
            $scope.data=[{
                "name":"zs",
                "age":"20",
                "sex":"boy",
                "salary":"15000"
            },{
                "name":"ls",
                "age":"22",
                "sex":"boy",
                "salary":"13000"
            },{
                "name":"ww",
                "age":"18",
                "sex":"girl",
                "salary":"12000"
            }];
            $scope.search="";
            $scope.sort="name";
            $scope.revers=false;
            $scope.sortItem=function(column){
                if($scope.sort==column){
                    $scope.revers=!$scope.revers;
                }
                $scope.sort=column;
            };
            $scope.getClass=function(column){
                if($scope.sort==column){
                    if($scope.revers==false){
                        return "top";
                    }else{
                        return "bot";
                    }
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="search">
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th ng-click="sortItem('name')">姓名<span ng-class="getClass('name')"></span></th>
        <th ng-click="sortItem('age')">年龄<span ng-class="getClass('age')"></span></th>
        <th ng-click="sortItem('sex')">性别<span ng-class="getClass('sex')"></span></th>
        <th ng-click="sortItem('salary')">薪资<span ng-class="getClass('salary')"></span></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:{'name':search}|orderBy:sort:revers">
        <td>{{$index}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.salary}}</td>
    </tr>
    </tbody>
</table>
</body>
</html>

gh323093

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
日程表

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="../angular-1.5.5/angular.min.js">script> script> //模拟数据 var data = { user:"李
复制链接

扫一扫