AngularJS Todo List App

Submitted by nurhodelta_17 on Monday, January 15, 2018 - 18:52.

Getting Started

I've used CDN for Bootstrap and Angular JS so you need internet connection for them to work.

index.html

This is our index where we show our todo app list.
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  4.     <meta charset="utf-8">
  5.     <title>AngularJS Todo List App</title>
  6.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  8.     <style type="text/css">
  9.         .div-list{
  10.                     background-color: #4CAF50;
  11.                     border: 1px solid #FFFFFF;
  12.                     color: #FFFFFF;
  13.                     padding: 10px 24px;
  14.                     cursor: pointer;
  15.                     width: 100%;
  16.                     display: block;
  17.                         margin-top:1px;
  18.                 }
  19.                 .div-list:not(:last-child) {
  20.                 border-bottom: none;
  21.                 }
  22.                 .div-list:hover {
  23.                 background-color: #FFFFFF;
  24.                 color: #4CAF50;
  25.                         border: 1px solid #4CAF50;
  26.                 }
  27.                 .mytask{
  28.                         margin-top:10px;
  29.                 }
  30.     </style>
  31. </head>
  32. <body ng-controller="myController">
  33. <div class="container">
  34.     <h1 class="page-header text-center">AngularJS Todo List App</h1>
  35.     <div class="row">
  36.             <div class="col-sm-4 col-sm-offset-4">
  37.                 <h3>Total Task : <b>{{ countAllTask() }}</b></h3>
  38.                 {{ counter }}
  39.                 <hr>
  40.                 <h3>Todo Task : <b>{{ (lists | filter : { complete: 'false' } : true).length }}</b></h3>
  41.                 <form ng-submit="addTask()">
  42.                         <input type="text" class="form-control" placeholder="New Task" ng-model="newtask">
  43.                     </form>
  44.                 <div class="mytask">
  45.                         <div class="div-list" ng-repeat="list in lists | filter:{ complete: 'false' }">
  46.                                 <button type="button" class="close" ng-click="deleteTask(list)">&times;</button>
  47.                                 <input type="checkbox" ng-model="list.Selected" ng-change="completeTask(list)"> {{ list.name }}
  48.                         </div>
  49.                     </div>
  50.                     <hr>
  51.                     <h3>Completed Task : {{ (lists | filter : { complete: 'true' } : true).length }}</h3>
  52.                     <div class="mytask">
  53.                         <div class="div-list" ng-repeat="list in lists | filter:{ complete: 'true' }">
  54.                                 <button type="button" class="close" ng-click="deleteTask(list)">&times;</button>
  55.                                 {{ list.name }}
  56.                         </div>
  57.                     </div>
  58.                     <button type="button" class="btn btn-danger mytask" ng-click="deleteCompleted()">Delete All Completed</button>
  59.                     <br><br>
  60.                 </div>
  61.         </div>
  62. </div>
  63. <script src="angular.js"></script>
  64. </body>
  65. </html>

angular.js

And this is our angular js script.
  1. var app = angular.module('app', []);
  2. app.controller('myController', function($scope, $filter){
  3.     $scope.lists = [
  4.         {
  5.                 taskid: 1,
  6.                 name: 'Learn Angular',
  7.                 complete: 'true'
  8.         },
  9.         {
  10.                 taskid: 2,
  11.                 name: 'Create Angular Apps',
  12.                 complete: 'false'
  13.         },
  14.         {
  15.                 taskid: 3,
  16.                 name: 'Submit Apps',
  17.                 complete: 'false'
  18.         }      
  19.     ]
  20.  
  21.     $scope.countAllTask = function(){
  22.         return $scope.lists.length;
  23.     }
  24.  
  25.     $scope.addTask = function(){
  26.         var obj = $scope.lists.length-1;
  27.  
  28.         if(obj < 0){
  29.                 var lastid = 1;
  30.         }
  31.         else{
  32.                 var lastid = $scope.lists[obj].taskid;
  33.                 }
  34.  
  35.                 $scope.lists.push({
  36.                 taskid: lastid + 1,
  37.                 name: $scope.newtask,
  38.                 complete: 'false'
  39.             });
  40.  
  41.             $scope.newtask = '';
  42.     }
  43.  
  44.     $scope.deleteTask = function(list){
  45.         var index = $scope.lists.indexOf(list);
  46.         $scope.lists.splice(index,1);
  47.     }
  48.  
  49.     $scope.completeTask = function(list){      
  50.         $scope.lists.find(function(v) {
  51.                   return v.taskid == list.taskid;
  52.                 }).complete = 'true';
  53.     }
  54.  
  55.     $scope.deleteCompleted = function(){
  56.         var completed = $filter('filter')($scope.lists, { complete: 'true' });
  57.         angular.forEach(completed, function(list){
  58.                         var index = $scope.lists.indexOf(list);
  59.                 $scope.lists.splice(index,1);
  60.                 });
  61.     }
  62.        
  63. });
That end this tutorial. Happy Coding :)
Tags
angular js
todo
todo app
todo app list
add array item
update array item
delete array item
DOM

Add new comment

About text formats
  • 340 views