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 图片轮换效果
Jul 29 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python简易版停车管理系统
2019/08/12 Python
python的Jenkins接口调用方式
2020/05/12 Python
python如何绘制疫情图
2020/09/16 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
XML文档面试题
2015/08/05 面试题
介绍一下linux的文件系统
2012/03/20 面试题
洗煤厂厂长岗位职责
2014/01/03 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
企业安全生产检查制度
2015/08/06 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python