----------------------------------------------------------
------------------------------------------------
<%@ 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>