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

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

先来看看运行效果：

具体代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net Angular日程表/title样式表{边框折叠： }折叠；} TD { padd : 10pxborder : 1px固体# 000;}/style脚本src=' http : angular。量滴js '/script脚本/* 1，基本布局2、准备模拟数据*///模拟数据定义变量数据={ 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 '，[])；/*这里的是自定义过滤器，将数组项目过滤之后返回arr*/myapp.filter('doFilter '，function(){ /*传入两个参数，一个数组物品，另一个是平面化*/返回函数(items，flag){ var arr=[]；/*遍历物品，如果dones是错误的或者下边的按钮在选中状态，就将这一条项目推送到到达)中*/for(var I=0；iitems.lengthi ){ if(items[i]).done==false){ arr。推送(项目[I])；} else { if(flag==true){ arr。推送(项目[I])；} } }返回arr } })；myapp.controller('myCtrl '，函数($ scope){ $ scope。数据=数据；$ scope.complete=false/*判断还有几件事儿没有完成*/$作用域。count=function(){ var n=0；/*判断还有几件事儿没有完成*/for(var I=0；I $ scope。数据。物品。长度；i ){ if($scope.data.items[i]).done==false){ n；} }返回n；};/*添加新的日程*/$scope.add=function(){ /*对$scope.action进行一下非空判断*/if($scope.action){ /*如果输入了内容之后，就在数组的最后加入一条新内容*/$作用域。数据。物品。push({ ' action ' : $作用域。action，' done ' : false })；/*添加完成之后，将投入置空*/$作用域。操作=' '；} };});/script/head body ng-app=' myapp ' ng-controller=' myCtrl ' H2吴四的日程span ng-bind=' count()'/span/H2分部输入类型=' text ' ng-model=' action '按钮ng-click=' add()'添加/button/divtable和tr th序号/th日程/th完成情况/th/tr/TD t车身tr ng-repeat='数据中的项目。items | dofilter : complete ' TD { { $ index } }/TD TD { { item }。action } }/TD t输入类型=' checkbox ' ng-model=' item。已完成'/TD/tr/t正文/表格div显示全部输入类型='checkbox' ng-model='平面化/div/body/html更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

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