todo angular with delete option

todo angular with delete option

by heriberto perez

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app ng-controller="TodoCtrl">
    <h1>Total todos: {{ getTotalTodos() }}</h1>
    <ul class="unstyled">
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done"> <span class="completed-{{todo.done}}">{{todo.task}}</span> <i class="icon-trash" ng-click="removeTask($index)"></i>
        </li>
    </ul>
    <form class="form-horizontal">
        <input ng-model="newTaskText">
            <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
    </form>
</div>

CSS

.completed-true {
    text-decoration: line-through;
    opacity: .3;
}
i.icon-trash {
    cursor: pointer;
}

JavaScript

function TodoCtrl($scope){
    
    $scope.todos = [
        {task : 'Task 1', done: false},
        {task : 'Task 2', done: false},
        {task : 'Task 3', done: false}
    ];
    $scope.getTotalTodos = function(){
        return $scope.todos.length;
    };
    $scope.removeTask = function(i){
        $scope.todos.remove(i);
    }
    $scope.addTodo = function(){
        $scope.todos.push({task : $scope.newTaskText, done: false});
        $scope.newTaskText = "";
    };
}

// Array Remove
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};