Angular实现的日程表功能【可添加及隐藏显示内容】
更新时间：2017年12月27日 11:50:19 作者：当爱0201
这篇文章主要介绍了Angular实现的日程表功能,带有向日程表中添加内容及隐藏显示内容的功能,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了Angular实现的日程表功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 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通过指令动态添加组件问题,文中通过写一个小组件来简单总结下，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了详解使用angular框架离线你的应用（pwa指南），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了浅析AngularJS中的生命周期和延迟处理,是AngularJS中较为核心的深层次内容,需要的朋友可以参考下2015-06-06
今天小编就为大家分享一篇在angularJs中进行数据遍历的2种方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了AngularJS 使用 UI Router 实现表单向导 的相关资料,需要的朋友可以参考下2016-01-01
本篇文章主要介绍了详解AngularJS ng-class样式切换，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了AngularJS入门知识之MVW类框架的编程思想探讨,本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解 MVW此类框架在流行的Web前端开发中的编程思想,需要的朋友可以参考下2014-12-12
$http是angular中的一个核心服务，本篇文章主要介绍了angularJS之$http：与服务器交互示例，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。2021-05-05
本文主要介绍了Angular的共享模块的实现，对此感兴趣的同学，可以实验一下2021-05-05
最新评论