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


Posted in Javascript onDecember 27, 2017

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.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程序设计有所帮助。

Javascript 相关文章推荐
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 #Javascript
简单的Vue异步组件实例Demo
Dec 27 #Javascript
Vue.js组件间的循环引用方法示例
Dec 27 #Javascript
全面介绍vue 全家桶和项目实例
Dec 27 #Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
浅谈vue-router 路由传参的方法
Dec 27 #Javascript
You might like
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php中的strpos使用示例
2014/02/27 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
phpwind放自动注册方法
2006/12/02 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
使用Python处理BAM的方法
2018/09/28 Python
Python3+Appium安装使用教程
2019/07/05 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
python动态文本进度条的实例代码
2020/01/22 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书