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 = ;
angular.forEach($scope.todo.items, function (item) {
if (!item.done) {
count++;
}
});
return count;
} $scope.warningLevel = function () {
return $scope.incompleteCount() < ? "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>