Pro AngularJS 2장 To do list

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

Pro AngularJS 2장 To do list

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

게시자: 토니아빠

댓글 남기기 응답 취소

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

이것을 평가하기:

이 글 공유하기:

이것이 좋아요:

게시자: 토니아빠

댓글 남기기 응답 취소