Angular Material Design ToDo App

by Rajdeep Chandra

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="pageController">
  <nav class="navbar">
    <h3>You have got {{getallToDos()}} things to do</h3>
  </nav>
  <div class="container">
    <ul>
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done" />
        <span class="done-{{todo.done}}">{{todo.text}}</span>
        <button ng-click="delete($index)">Close</button>
      </li>
    </ul>
    <input type="text" ng-model="addnew" name="addnew"/>
    <button ng-click="addtodo()">Add New Task</button>
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: #ddd;
}

JavaScript

var app = angular.module('newApp', []);
app.controller('pageController', function($scope) {
  $scope.todos = [{
      text: "Scrum Meeting",
      done: false
    }, {
      text: "Learn Angular",
      done: false
    }

  ];
  $scope.getallToDos = function() {
    return $scope.todos.length;
  };
  
 
  $scope.addtodo = function() {
    $scope.todos.push({
      text: $scope.addnew,
      done: false
    });
    $scope.addnew = "";
  };
  
  $scope.delete = function(todo)
  {
  
$scope.todos.splice(todo ,1);
  }
});