ToDo App - AngularJs

by Roman Joseph Rimorin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.js"></script>
<div ng-controller="todoController">
  <form name="frm" ng-submit="addTodo()">
    <input type="text" name="newTodo" ng-model="newTodo" required />
    <button ng-disabled="frm.$invalid">
      Go
    </button>
  </form>
  <button ng-click="clearCompleted()">
    Clear Completed
  </button>
  <ul>
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done" />
      <span ng-class="{done: todo.done}">{{ todo.title }}</span>
    </li>
  </ul>
</div>

CSS

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

JavaScript

angular.module('ToDo', [])
  .controller('todoController', function($scope) {

    $scope.todos = [{
      title: 'Create a todo app',
      done: false
    }];

    $scope.addTodo = function() {
      $scope.todos.push({
        title: $scope.newTodo,
        done: false
      })
      $scope.newTodo = '';
    }

    $scope.clearCompleted = function() {
      $scope.todos = $scope.todos.filter(function(item) {
        return !item.done;
      })
    }

  })