AngularJS Example

by mledbetter

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div ng-controller="ToDoCtrl">
    <div class="page-header">
         <h1>
            {{todo.user}}'s To Do List
            <span class="label label-default" ng-hide="incompleteCount() == 0">
                {{incompleteCount()}}
            </span>
        </h1>

    </div>
    <div class="panel">
        <div class="input-group">
            <input class="form-control" /> <span class="input-group-btn">
                <button class="btn btn-default">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">
                    <td>{{item.action}}</td>
                    <td>
                        <input type="checkbox" ng-model="item.done" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

JavaScript

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

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

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;
    }
});