【AngularJS】ToDo List

今回も参考はドットインストール様
#01 ToDoを表示させよう | AngularJSで作るToDoアプリ - プログラミングならドットインストール

まずは、
checkboxつけて終わったタスクにはチェックつけてグレーの線を引く

//index.html

<h1>Todo List</h1>
<div ng-controller="mainCtrl">
    <ul>
        <li ng-repeat="task in tasks">
            <input type="checkbox" ng-model="task.done">
            <span class="done-{{task.done}}">{{task.body}}</span>
        </li>
    </ul>
 </div>

myscript.js

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},
    ];

次に、
ToDoを追加してフォームの文字を空に
//index.html

<form ng-submit="addNew()">
   <input type="text" ng-model="newTaskBody">
   <input type="submit" value="add">
</form>

//myscript.js

$scope.addNew = function(){
    $scope.tasks.push({"body":$scope.newTaskBody, "done":false});
    $scope.newTaskBody = "";
}

addNew()という関数を作り、$scopeのtasksに追加できるようにする。
配列なのでpushだよ。
追加する内容は、formのng-modelのnewTaskBody。

ToDo数の表示
//index.html

<p>Finished Task: {{getDoneCount()}} / {{tasks.length}}
</p>

タスクが終わった数はgetDoneCount()という関数を作る

//myscript.js

$scope.getDoneCount = function(){
    var count = 0;
    angular.forEach($scope.tasks, function(task){
        count += task.done ? 1 : 0;            
    });
     
    return count;
}

お馴染みforEachを利用して、全タスクからdoneがtrueのcountを取得してcountを返す関数。

ToDoの削除
//index.html

<button ng-click="deleteDone()">Delete Finished</button>

//myscript.js

$scope.deleteDone = function(){
    var oldTasks = $scope.tasks;
    $scope.tasks = [];
    angular.forEach(oleTasks, function(task) {
        if(!task.done) $scope.tasks.push(task);
    });
}

いったん全タスクを変数にとっておき、現状のリストを空にする。
とっておいたタスクリストから一つずつ取り出しdoneならまたリストに追加する。

アルゴリズム的なプログラミングの考え方はどの言語でも同じなので、あとは書き方に慣れるだけだな。