angular js 日程安排表

来源：互联网发布：win7不允许安装软件编辑：程序博客网时间：2024/04/29 14:54
<!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-1.5.5/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>
阅读全文
0 0