Angular/03-todo-list-ng-repeat.html

<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>03-todo-list-ng-repeat</title>

  <!--App Dependencies-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

  <style>
    .done-true {
      text-decoration: line-through;
      color: grey;
    }
  </style>
</head>
<body>

<!--App view-->
<div data-ng-controller="AppCtrl">
  <h1>{{title}}</h1>
  <span>{{remaining()}} of {{length}} remaining</span>
  [ <a href="" data-ng-click="archive()">Archive</a> ]

  <ul class="unstyled">
    <li data-ng-repeat="todo in todos">
      <label class="checkbox">
        <input type="checkbox" data-ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </label>
    </li>
  </ul>

  <form data-ng-submit="addTodo()">
    <input type="text" data-ng-model="todoText" size="30"
           placeholder="Add new todo here">
    <input type="submit" value="add">
  </form>
</div>

<!--App scripts-->
<script>
  angular
    .module('myApp', [])
    .controller('AppCtrl', AppCtrl);

  AppCtrl.$inject = ['$scope'];

  function AppCtrl($scope) {

    //vm locals
    $scope.title = "Todo";
    $scope.todos = [
      {text: 'learn angular', done: true},
      {text: 'build an angular app', done: false}
    ];

    //vm functions
    $scope.addTodo = addTodo;
    $scope.remaining = remaining;
    $scope.archive = archive;


    //Add new todo.
    function addTodo() {
      $scope.todos.push({text: $scope.todoText, done: false});
      $scope.todoText = '';
    }

    //Remaining todos.
    function remaining() {
      var count = 0;

      angular.forEach($scope.todos, function (todo) {
        count += todo.done ? 0 : 1;
      });

      return count;
    }

    //Remove completed todos.
    function archive() {
      var oldTodos = $scope.todos;
      $scope.todos = [];

      angular.forEach(oldTodos, function (todo) {
        if (!todo.done) $scope.todos.push(todo);
      });
    }
  }
</script>
<!--check out other one page boilerplates over here > https://github.com/shahzadns/one-page-boilerplates -->
</body>
</html>