todo.json
[ { "action": "Buy Flowers", "done": false }, { "action": "Get Shoes", "done": false }, { "action": "Collect Tickets", "done": true }, { "action": "Call Joe", "done": false } ]
todo.html
<!DOCTYPE html> <html ng-app="todoApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>TO DO List</title> <meta charset="utf-8" /> <link href="css/bootstrap.css" rel="stylesheet" /> <link href="css/bootstrap-theme.css" rel="stylesheet" /> <script src="js/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.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"> <h2> {{todo.user}}'s To Do List <span class="label label-default" ng-class="warningLevel()" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span> </h2> </div> <div class="panel"> <div class="input-group"> <input class="form-control" ng-model="actionText"/> <span class="input-group-btn"> <button class="btn btn-success" 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|orderBy:'action'"> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> </tr> </tbody> </table> </div> </body> </html>