pro-angularjs-chapter2/todo.html at master · aaccioly-books/pro-angularjs-chapter2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>TO DO List</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-theme.css"/>
    <script src="angular.js"></script>
    <script>
        var model = {
            user: "Adam"
        };

        var todoApp = angular.module("todoApp", []);

        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() < 3 ? "label-success" : "label-warning";
            };

            $scope.addNewItem = function (actionText) {
                $scope.todo.items.push({ action: actionText, done: false});
            };
        });
    </script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
    <h1>
        {{todo.user}}'s To Do List
        <span class="label label-default" ng-class="warningLevel()"
              ng-hide="incompleteCount() == 0">
            {{incompleteCount()}}
        </span>
    </h1>
</div>
<div class="panel">
    <div class="input-group">
        <input class="form-control" ng-model="actionText"/>
        <span class="input-group-btn">
            <button class="btn btn-default"
                    ng-click="addNewItem(actionText)">Add</button>
        </span>
    </div>
    <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 ng-model="item.done" type="checkbox"/></td>
        </tr>
        </tbody>
    </table>

    <div class="checkbox-inline">
        <label>
            <input ng_model="showComplete" type="checkbox"> Show Complete</input>
        </label>
    </div>
</div>
</body>
</html>