pim
/
todolist-angularjs.html

<!DOCTYPE html>
<html ng-app="todo">
<head>
    <title>TodoList</title>
	<script src="../angular.min.js"></script>
	<script type="text/javascript">
		var todoModule=angular.module('todo',[]);
		todoModule.controller('cc',function($scope){
			$scope.input={title:'',fulfil:false};
			$scope.editOrAdd = "Add";
			$scope.currIndex=0;
			$scope.todos=[
				{fulfil:true,title:'test1'},
				{fulfil:false,title:'test2'},
				{fulfil:false,title:'test3'}
			];

			$scope.add=function(){
				if($scope.input.title.length==0){
					return;
				}
				if($scope.editOrAdd == "Modify"){
					if($scope.currIndex < 0){
						alert("currIndex less zero.")
						return;
					}
					index=$scope.currIndex;
					$scope.todos[index]={title:$scope.input.title,fulfil:$scope.input.fulfil};
		    		$scope.input={title:'',fulfil:false};
					$scope.editOrAdd = "Add";
					$scope.currIndex= -1 ;
				}else if($scope.editOrAdd == "Add"){
					var title=$scope.input.title;
					$scope.todos.push({title:title,fulfil:false});
					$scope.input.title='';
				}
			}
			$scope.remove=function(index){
				$scope.todos.splice(index,1);
			}

			$scope.modify=function(index){
				$scope.input=$scope.todos[index];
				$scope.editOrAdd="Modify";
				$scope.currIndex=index;
			}
		})
	</script>
	<style type="text/css">
		.fulfil{
			color:gray;
			text-decoration: line-through;
		}
	</style>
</head>
<body >
	<div ng-controller='cc'>
		<h1>TODO:</h1>
		<input ng-model="input.title">
		<button ng-click='add()'>{{editOrAdd}}</button>
		<div ng-repeat='todo in todos'>
			<input type="checkbox" ng-model='todo.fulfil' >
			<span ng-class={fulfil:todo.fulfil} ng-dblclick='modify($index)'>{{todo.title}}</span>
			<button ng-click='remove($index)'>Delete</button>
		</div>
	</div>
</body>
</html>