----------------------------------------------------------
------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>待办事项与已办事项</title>
<!-- 首先引用angular的插件 -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
//创建一个模块
var app = angular.module("app",[]);
//创建一个控制器
app.controller("AppController",["$scope",function($scope){
//定义一个待办事项数组
$scope.todos = [];
//定义一个已办事项数组
$scope.dones = [];
//添加待办事项
$scope.addTodo = function(){
//alert($scope.todo);
//向待办事项数组中添加一个待办事项
$scope.todos.push({text:$scope.todo,flag:false});
//清空文本框
$scope.todo = "";
};
//添已办事项
$scope.done = function(index){
var item = $scope.todos.splice(index,1)[0];
item.flag = true;
$scope.dones.push(item);
};
//取消已办事项
$scope.cancel = function(index){
var item = $scope.dones.splice(index,1)[0];
item.flag = false;
$scope.todos.push(item);
};
//删除待办事项
$scope.delToDo = function(index){
$scope.todos.splice(index,1)[0];
};
//删除已办事项
$scope.delDone = function(index){
$scope.dones.splice(index,1)[0];
};
}]);
</script>
</head>
<style type="text/css">
.doneSpan {
text-decoration:line-through;
font-style: italic;
color: gray;
}
</style>
</head>
<body ng-app="app" ng-controller="AppController">
<div>
<h2>添加待办事项</h2>
<form ng-submit="addTodo()">
请输入:<input type="text" ng-model="todo" />
</form>
</div>
<div>
<h2>待办事项列表{{todos.length}}</h2>
<div ng-repeat="item in todos">
<input type="checkbox" ng-click="done($index)" ng-checked="item.flag" />
<span>{{ item.text }}</span>
<a href="javascript:void(0)" ng-click="delToDo($index)" >删除</a>
</div>
</div>
<div>
<h2>已做事项列表:{{ dones.length }}</h2>
<div class="doneSpan">
<div ng-repeat="item in dones">
<input type="checkbox" ng-click="cancel($index)" ng-checked="item.flag" />
<span>{{ item.text }}</span>
<a href="javascript:void(0)" ng-click="delDone($index)" >删除</a>
</div>
</div>
</div>
</body>
</html>