您的位置：首页 > 其它

给大家做了一个关于日程的例子,可以参考一下,对进一步学习有所帮助

2017-09-20 14:38 537 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border: 1px solid #000;
border-collapse: collapse;
}
td{
padding: 10px;
border: 1px solid #000;
}
</style>
<script src="../script/angular.min.js"></script>
<script>
var data={
user:"小名",
items:[
{action:"约赵丽颖吃饭",done:false},
{action:"约赵丽颖跳舞",done:false},
{action:"约赵丽颖敲代码",done:false},

4000
{action:"约赵丽颖逛街",done:false},
{action:"约赵丽颖看电影",done:true},
{action:"约赵丽颖看星星",done:false}
]
};

var myapp=angular.module("myapp",[]);
myapp.filter("doFilter",function () {
return function (items,complate) {
var arr=[];
for(var i=0;i<items.length;i++){
if(items[i].done==false){
arr.push(items[i]);
}else {
if (complate==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 () {
if($scope.action){
$scope.data.items.push({"action":$scope.action,"done":false});
$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>
<tr>
<td>序号</td>
<td>日程</td>
<td>完成情况</td>
</tr>
<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>
</table>
<div>显示全部<input type="checkbox" ng-model="complate"/></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航