日程表

最新推荐文章于 2019-04-26 15:48:13 发布

mzr777

最新推荐文章于 2019-04-26 15:48:13 发布

阅读量187

点赞数

分类专栏：周考

本文链接：https://blog.csdn.net/mzr777/article/details/78317973

版权

周考专栏收录该内容

9 篇文章 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>