本文实例讲述了Angular实现的日程表功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>www.freexyz.cn 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程序设计有所帮助。
© 版权声明
THE END
暂无评论内容