Pro AngularJS 2장 To do list

※ 실행결과 http://study.jeju.onl/todo.html

Pro AngularJS 책을 공부하면서 작성된 소스코드와 설명을 기록합니다.

* 설치환경
Apache/2.4.7 (Ubuntu)
AngularJS v1.4.4

완성된 To do list 의 화면입니다.

ProAngularJS-ch02-todolist

다음은 이에 대한 소스코드 입니다.

<!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"> 
  
  
Add
Show all including completed
<p>&nbsp;</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 }
]

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: