Angular.jsによるToDoListをつくります。挙動はブラウザで確認ください。
var mainCtrl = function($scope, $http){
$scope.tasks = [
{"body":"do this 1", "done":false},
{"body":"do this 2", "done":false},
{"body":"do this 3", "done":true},
{"body":"do this 4", "done":false},
];
$scope.addNew = function(){
$scope.tasks.push({"body":$scope.newTaskBody,"done":false});
$scope.newTaskBody = '';
}
$scope.getDoneCount = function(){
var count = 0;
angular.forEach($scope.tasks, function(task){
count += task.done ? 1 : 0;
});
return count;
}
$scope.deleteDone = function(){
var oldTasks = $scope.tasks;
$scope.tasks = [];
angular.forEach(oldTasks, function(task){
if (!task.done) $scope.tasks.push(task);
})
}
}
index.html
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<meta charset="UTF-8">
<title>Angularの練習</title>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script src="myscript.js"></script>
<style>
.done-true{
color:gray;
text-decoration:line-through;
}
</style>
</head>
<body>
<h1>Todo list</h1>
<div ng-controller="mainCtrl">
<p>Finished Task: {{getDoneCount()}} / {{tasks.length}}
<button ng-click="deleteDone()">Delete finished</button>
</p>
<ul>
<li ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.done">
<span class="done-{{task.done}}">{{task.body}}<span>
<a href ng-click="tasks.splice($index,1)">[x]</a>
</li>
</ul>
<form ng-submit="addNew()">
<input type="text" ng-model="newTaskBody">
<input type="submit" value="add">
</form>
</div>
</body>
</html>
