日程表

来源：互联网发布：rw125k读卡器驱动软件编辑：程序博客网时间：2024/04/27 22:38
<!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>
阅读全文
0 0