Angularjs To Do List Manager

Angularjs To Do List Manager

Created By: Debasis Das (21-Nov-2016)

Online Demo at https://knowstack.github.io/angularjs/todolist/

Download the source code at https://github.com/knowstack/angularjs/tree/master/todolist

angularjs todo list manager

angularjs todo list manager

Angularjs ToDo List Manager Source Code

<!doctype html>
<html lang="en" ng-app = 'KSTodoListTracker'>
  <head>
    <title>Knowstack To Do List Tracker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="angular.min.js"></script>
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <style>
      .emptyMessage {
        font-weight: bold;
        color: red;
        font-size: 1.2em;
      }
      li {
        margin-bottom: 7px;
        font-size: 1.2em;
      }
      li > button {
        margin-left: 6px;
      }
      button > span {
        color: green;
      }
    </style>
    <script>
    
    (function () {
	'use strict';

		angular.module('KSTodoListTracker', [])
		.controller('ToDoListController', ToDoListController)
		.controller('CompletedItemsController', CompletedItemsController)
		.service('ToDoListService', ToDoListService);

		ToDoListController.$inject = ['ToDoListService'];
		CompletedItemsController.$inject = ['ToDoListService'];
		ToDoListService.$inject = ['$filter'];
		
		function ToDoListController(ToDoListService) {
			var showList = this;
	  		showList.items = ToDoListService.getTodoList();
	  		showList.newItem = "";

  			showList.completeToDoItem = function(itemIdex){
    		var itemName = showList.items[itemIdex]["name"];
    		ToDoListService.addCompletedItem(itemName);
    		ToDoListService.removeToDoItem(itemIdex);
  			};
  			
  			showList.deleteToDoItem = function(itemIndex){
  			ToDoListService.removeToDoItem(itemIndex);
  			};
  			
  			showList.addNewItem = function () {
    			ToDoListService.addToDoItem(showList.newItem);
  			}
		}

		function CompletedItemsController(ToDoListService) {
		  var showList = this;
		  showList.items = ToDoListService.getCompletedList();
		  showList.deleteCompletedItem = function(itemIndex){
		  ToDoListService.removeCompletedItem(itemIndex);
		  };
		}



		function ToDoListService($filter) {
		  var service = this;
		  var todoList = [];
		  var completedList = [];

		  service.getTodoList = function () {
			return todoList;
		  };
		  
		  service.getCompletedList = function () {
			return completedList;
		  };

		  service.removeToDoItem = function (itemIdex) {
			todoList.splice(itemIdex, 1);
		  };

		 service.removeCompletedItem = function(itemIndex){
		 	completedList.splice(itemIndex,1);
		 };
		 
		 service.addToDoItem = function(itemName){
		   var item = {
				name: itemName
				};
				todoList.push(item);
		 };

		 service.addCompletedItem = function(itemName){
		   var finalStr = itemName + ' completed on - ' +  $filter('date')(new Date(), 'yyyy-MM-dd hh:mm');
		   var item = {
				name: finalStr
				};
				completedList.push(item);
		 };
	}
})();

</script>
  </head>
<body>
  <div class="container">
  <h1>Knowstack To Do List Manager</h1>
  <div class="row">
    <div id="list1" class="col-md-6" ng-controller='ToDoListController as list1'>
       <h2>To Do:</h2>
       <form ng-submit="list1.addNewItem();" >
       <input type="text" class="form-control" ng-model="list1.newItem" placeholder="New To Do Item" >
       </form>
       <br>
       <ul class="list-group">
        <li class="list-group-item" ng-repeat="item in list1.items">
          {{ item.name }}
          <button type="button" class="btn btn-success btn-xs" ng-click="list1.completeToDoItem($index);">Mark as Complete</button>
          <button type="button" class="btn btn-danger btn-xs" ng-click="list1.deleteToDoItem($index);">Delete</button>
        </li>
      </ul>
    </div>
</div>
  <div class="row">
    <div id="list2" class="col-md-6" ng-controller='CompletedItemsController as list2'>
       <h2>Completed:</h2>
       <ul class="list-group">
        <li class="list-group-item" ng-repeat="item in list2.items">
         	{{ item.name}}
         	<button type="button" class="btn btn-danger btn-xs" ng-click="list2.deleteCompletedItem($index);">Delete</button>
        </li>
      </ul>
    </div>
</body>
</html>

Posted in angularjs, CSS, HTML5, Web Technology Tagged with: , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news