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 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>
Leave a Reply