angular+做一个日程表，可以添加内容然后可以隐藏显示

最新推荐文章于 2022-07-01 15:00:42 发布

C--罗纳尔多

最新推荐文章于 2022-07-01 15:00:42 发布

阅读量661

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/dangai0201/article/details/77949355

版权

html5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
    <script src="angular/angular.js"></script>
    <script>
        /*
         1、基本布局
         2、准备模拟数据
         */
        // 模拟数据
        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",[]);
        /*这里的是自定义过滤器，将数组items 过滤之后返回arr*/
        myapp.filter("doFilter",function(){
            /*传入两个参数，一个数组items，另一个是complate*/
            return function(items,flag){
                var arr=[];
                /*遍历items,如果dones是false或者下边的按钮在选中状态，就将这一条item push到arr中*/
                for(var i=0;i<items.length;i++){
                    if(items[i].done==false){
                        arr.push(items[i]);
                    }else{
                        if(flag==true){
                            arr.push(items[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.add=function(){
                /*对$scope.action进行一下非空判断*/
                if($scope.action){
                    /*如果输入了内容之后，就在数组的最后加入一条新内容*/
                    $scope.data.items.push({"action":$scope.action,"done":false});
                    /*添加完成之后，将input置空*/
                    $scope.action="";
                }
            };
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>吴四的日程<span ng-bind="count()"></span></h2>
<div>
    <input type="text" ng-model="action"><button ng-click="add()">添加</button>
</div>
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>日程</th>
        <th>完成情况</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data.items|doFilter:complate">
        <td>{{$index}}</td>
        <td>{{item.action}}</td>
        <td><input type="checkbox" ng-model="item.done"></td>
    </tr>
    </tbody>
</table>
<div>显示全部<input type="checkbox" ng-model="complate"></div>
</body>
</html>

C--罗纳尔多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular+做一个日程表，可以添加内容然后可以隐藏显示

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> table{ border-collapse: collapse; } td{ padding: 10px;
复制链接

扫一扫