当前位置：Gxlcms > JavaScript > Angular实现的日程表功能【可添加及隐藏显示内容】

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

时间：2021-07-01 10:21:17 帮助过：6人阅读

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

先来看看运行效果：

具体代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>www.gxlcms.com Angular日程表</title>
  6.   <style>
  7.     table{
  8.       border-collapse: collapse;
  9.     }
  10.     td{
  11.       padding: 10px;
  12.       border: 1px solid #000;
  13.     }
  14.   </style>
  15.   <script src="angular.min.js"></script>
  16.   <script>
  17.     /*
  18.      1、基本布局
  19.      2、准备模拟数据
  20.      */
  21.     // 模拟数据
  22.     var data = {
  23.       user:"吴四",
  24.       items:[
  25.         {action:"约刘诗诗吃饭",done:false},
  26.         {action:"约刘诗诗跳舞",done:false},
  27.         {action:"约刘诗诗敲代码",done:true},
  28.         {action:"约刘诗诗爬长城",done:false},
  29.         {action:"约刘诗诗逛天坛",done:false},
  30.         {action:"约刘诗诗看电影",done:false}
  31.       ]
  32.     };
  33.     var myapp=angular.module("myapp",[]);
  34.     /*这里的是自定义过滤器，将数组items 过滤之后返回arr*/
  35.     myapp.filter("doFilter",function(){
  36.       /*传入两个参数，一个数组items，另一个是complate*/
  37.       return function(items,flag){
  38.         var arr=[];
  39.         /*遍历items,如果dones是false或者下边的按钮在选中状态，就将这一条item push到arr中*/
  40.         for(var i=0;i<items.length;i++){
  41.           if(items[i].done==false){
  42.             arr.push(items[i]);
  43.           }else{
  44.             if(flag==true){
  45.               arr.push(items[i]);
  46.             }
  47.           }
  48.         }
  49.         return arr;
  50.       }
  51.     });
  52.     myapp.controller("myCtrl",function($scope){
  53.       $scope.data=data;
  54.       $scope.complate=false;
  55.       /*判断还有几件事儿没有完成*/
  56.       $scope.count=function(){
  57.         var n=0;
  58.         /*判断还有几件事儿没有完成*/
  59.         for(var i=0;i<$scope.data.items.length;i++){
  60.           if($scope.data.items[i].done==false){
  61.             n++;
  62.           }
  63.         }
  64.         return n;
  65.       };
  66.       /*添加新的日程*/
  67.       $scope.add=function(){
  68.         /*对$scope.action进行一下非空判断*/
  69.         if($scope.action){
  70.           /*如果输入了内容之后，就在数组的最后加入一条新内容*/
  71.           $scope.data.items.push({"action":$scope.action,"done":false});
  72.           /*添加完成之后，将input置空*/
  73.           $scope.action="";
  74.         }
  75.       };
  76.     });
  77.   </script>
  78. </head>
  79. <body ng-app="myapp" ng-controller="myCtrl">
  80. <h2>吴四的日程<span ng-bind="count()"></span></h2>
  81. <div>
  82.   <input type="text" ng-model="action"><button ng-click="add()">添加</button>
  83. </div>
  84. <table>
  85.   <thead>
  86.   <tr>
  87.     <th>序号</th>
  88.     <th>日程</th>
  89.     <th>完成情况</th>
  90.   </tr>
  91.   </thead>
  92.   <tbody>
  93.   <tr ng-repeat="item in data.items|doFilter:complate">
  94.     <td>{{$index}}</td>
  95.     <td>{{item.action}}</td>
  96.     <td><input type="checkbox" ng-model="item.done"></td>
  97.   </tr>
  98.   </tbody>
  99. </table>
  100. <div>显示全部<input type="checkbox" ng-model="complate"></div>
  101. </body>
  102. </html>

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！