Angular实现的日程表功能【可添加及隐藏显示内容】

2019-11-19 14:38:14

字体：大中小

来源：转载

供稿：网友

本文实例讲述了Angular实现的日程表功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm Angular日程表</title>  <style>    table{      border-collapse: collapse;    }    td{      padding: 10px;      border: 1px solid #000;    }  </style>  <script src="angular.min.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>

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

上一篇：Angular实现点击按钮后在上方显示输入内容的方法

下一篇：使用nodejs+express实现简单的文件上传功能