<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular Todo App</title>
<meta charset="UTF-8">
<link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav class="nav navbar navbar-inverse navbar-fixed">
<div class="container">
<div class="row">
<div class="navbar-left">
<a href="#" class="navbar-brand">Logo</a>
</div>
<!--THREE-->
<div class="navbar-right">
<form class="navbar-form" role="form">
<div class="form-group">
<label for="search" class="sr-only">Search</label> <input type="text" id="search" name="search" placeholder="Search now!" class="form-control" ng-model="query" /> <button class="btn btn-default"><i class="glyphicon glyphicon-search"></i> <span class="sr-only">Search now!</span></button>
</div>
</form>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<!--ONE-->
<h1>To Do List</h1>
</div>
<hr />
<!--TWO-->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Task to do:</th>
<th>Date due:</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | filter: query">
<td class="col-md-7 col-sm-7 col-xs-7">
<!-- ITEM NAME HERE -->
{{item.name}}
</td>
<td class="col-md-4 col-sm-4 col-xs-4">
<!-- ITEM DATE HERE -->
{{item.date}}
</td>
<!--FIVE-->
<td class="col-md-1 col-sm-1 col-xs-1">
<button type="button" class="btn btn-danger" ng-click="deleteItem($index)">x</button>
</td>
</tr>
</tbody>
</table>
<!--FOUR-->
<form class="form form-inline" ng-submit="addItem(item)">
<fieldset>
<legend>
Add new todo item
</legend>
<div class="form-group">
<label class="control-label" for="todo_name">Enter todo:</label>
<input type="text" id="todo_name" name="todo_name" class="form-control" ng-model="item.name" />
</div>
<div class="form-group">
<label class="control-label" for="todo_date">Enter date due:</label>
<input type="text" id="todo_date" name="todo_date" class="form-control" ng-model="item.date" />
</div>
<button type="submit" class="btn btn-success">Add Todo</button>
</fieldset>
</form>
</div>
</body>
</html>
// Code goes here
angular.module('myApp', [])
.controller('MainCtrl', function($scope, ToDoList){
//Factory
ToDoList.getItems().then(function(data){
$scope.items = data;
})
$scope.addItem = function(item){
var newItem = angular.copy(item);
$scope.items.push(newItem);
};
$scope.deleteItem = function($index){
$scope.items.splice($index, 1);
}
})
//Factory and API Call
.factory('ToDoList', function($http){
return {
getItems: function(){
var promise = $http.get('items.json')
.then(function(res){
return res.data;
})
return promise;
}
}
})
/* Styles go here */
[
{
"name": "Dust the living room",
"date": "2015-05-05"
},
{
"name": "Make the beds",
"date": "2015-05-05"
},
{
"name": "Wash the dishes",
"date": "2015-05-05"
}
]