Pro AngularJS 2장 To do list

토니아빠 켬 2015년 9월 1일

※ 실행결과 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"> 
  

    
{{ todo.user }}'s To Do List
      
        {{ incompleteCount() }}/{{ todo.items.length }}
      
    

  

  

    

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

 

게시자: 토니아빠

웰시코기 토니와 함께 제주도에 살고 있는 프리랜서 개발자입니다. 웹앱 개발과 데이터분석을 합니다. 제주도 여행/관광 관련 큐레이션 서비스를 준비중입니다.

답글 남기기

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

Gravatar
WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

취소

%s에 연결하는 중

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