<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导包-->
<script src="angular-1.5.5/angular.min.js"></script>
<script>
//模拟数据
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",[]);
//过滤
myapp.filter("todo",function(){
return function(a,flag){
var arr=[];
for(var i=0;i<a.length;i++){
if(a[i].done==false){
arr.push(a[i])
}else{
if(flag==true){
arr.push(a[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.addItem=function(){
$scope.data.items.push({'action':$scope.add,'done':false});
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>{{data.user}}的日程表<span>{{count()}}</span></h1>
<input type="text" ng-model="add"><button ng-click="addItem()">添加</button>
<table>
<thead>
<tr>
<th>序号</th>
<th>日程</th>
<th>完成</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data.items|todo:complate">
<td>{{$index}}</td>
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done"></td>
</tr>
</tbody>
</table>
<div>显示全部<span><input type="checkbox" ng-model="complate"></span></div>
</body>
</html>
angularjs的添加,显示隐藏
最新推荐文章于 2022-06-17 15:42:31 发布