※ 실행결과 http://study.jeju.onl/todo.html
Pro AngularJS 책을 공부하면서 작성된 소스코드와 설명을 기록합니다.
* 설치환경
Apache/2.4.7 (Ubuntu)
AngularJS v1.4.4
완성된 To do list 의 화면입니다.
다음은 이에 대한 소스코드 입니다.
<!DOCTYPE html> <html ng-app="todoApp"> <head> <title> TO Do List </title> <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" /> /node_modules/angular/angular.js var todoApp = angular.module("todoApp", []); var model = { user: "Adam" /* , items: [ { action: "Buy Flowers", done: false }, { action: "Get Shoes", done: false }, { action: "Collect Tickets", done: true }, { action: "Call Joe", done: false } ] */ }; todoApp.run(function ($http) { $http.get("todo.json").success(function(data) { model.items = data; }); }); todoApp.filter("checkedItems", function() { return function(items, showComplete) { var resultArr = []; angular.forEach(items, function(item) { if (item.done == false || showComplete == true) { resultArr.push(item); } }); return resultArr; }; }); todoApp.controller("todoCtrl", function($scope) { $scope.todo = model; $scope.incompleteCount = function() { var count = 0; angular.forEach($scope.todo.items, function(item) { if (!item.done) { count++ } }); return count; }; $scope.warningLevel = function() { return $scope.incompleteCount() </head> <body ng-controller="todoCtrl">{{ todo.user }}'s To Do List {{ incompleteCount() }}/{{ todo.items.length }}
AddShow all including completed<p> </p> <table class="table table-striped"> <thead> <tr> <th>Description</th> <th>Done</th> </tr> </thead> <tbody> <tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'"> <td>{{ item.action }}</td> <td><input type="checkbox" ng-model="item.done" /></td> </tr> </tbody> </table> </div> </body> </html>데이터 소스로 json 파일을 사용하고 있습니다.
[ { "action": "Buy Flowers", "done": false }, { "action": "Get Shoes", "done": false }, { "action": "Collect Tickets", "done": true }, { "action": "Call Joe", "done": false } ]