<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.css" />
<link rel="stylesheet" href="style.css" />
<title>To Do Items</title>
</head>
<body>
<div class="container" ng-app="myApp">
<div ng-controller="MainCtrlr">
<div ng-view=""></div>
</div>
</div>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/list',{
templateUrl:'list.html'
})
.when('/add',{
templateUrl:'add.html',
controller:'DataCtrlr'
}).
when('/mark',{
templateUrl:'mark.html'
})
.otherwise({redirectTo:'/list'});
}]);
app.controller('MainCtrlr', function($scope){
console.log('MainCtrlr');
$scope.taskList = [];
});
app.controller('ListCtrlr', function($scope){
console.log('ListCtrlr');
$scope.remove = function(task){
console.log(task);
var idx = $scope.taskList.indexOf(task);
console.log('Index:', idx)
console.log('removed:', $scope.taskList.splice(idx,1));
};
});
app.controller('DataCtrlr', function($scope){
console.log('DataCtrlr');
$scope.newTask = {desc:'', done:false};
$scope.add = function(){
$scope.taskList.push($scope.newTask);
};
});
app.controller('MarkCtrlr', function($scope){
console.log('MarkCtrlr');
});
/* Styles go here */
#list ul{
padding:0px;
margin:0px;
list-style:none;
}
<div id="list" ng-controller="ListCtrlr">
<h3>Task List</h3>
<div ng-show="taskList.length == 0" class="well">
<h4>Your task list is empty</h4>
<p>Enter some tasks...</p>
<a href="#/add" class="btn btn-success">Add Task</a>
</div>
<div ng-show="taskList.length > 0">
<a href="#/add" class="btn btn-default">Add Task</a>
<br/>
<br/>
<table class="table table-striped">
<thead><tr>
<th>Task</th>
<th>Completed</th>
<th>Action</th>
</tr></thead>
<tbody>
<tr ng-repeat="task in taskList">
<td>
<span ng-hide="task.done">{{task.desc}}</span>
<s ng-show="task.done">{{task.desc}}</s>
</td>
<td>{{task.done? 'Yes':'No'}}</td>
<td>
<a href="javascript:void(0)" ng-click="remove(task)">Remove</a>
</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<a href="#/add" class="btn btn-default">Add Task</a>
<a href="#/mark" class="btn btn-default">Mark As Done</a>
</div>
</div>
<h3>Add Task</h3>
<div class="form-inline">
<input type="text" placeholder="Enter Task" class="form-control" ng-model="newTask.desc"/>
<br/>
<p>
<a href="#/list" ng-click="add()" class="btn btn-default" ng-disabled="newTask.desc.trim().length == 0">Add</a>
<a href="#/list">Back</a>
</p>
</div>
<h3>Mark Tasks as Done here</h3>
<div id="list" ng-controller="MarkCtrlr">
<ul>
<li ng-repeat="task in taskList">
<input type="checkbox" ng-model="task.done"> {{task.desc}}
</li>
</ul>
<a href="#/list" class="btn btn-success">Back</a>
</div>