AngularJS Live Example

by dandoyon

HTML

<script src="http://code.angularjs.org/angular-0.9.19.min.js"></script>
<script src="http://docs-next.angularjs.org/angular-0.10.5.min.js" ng:autobind></script>
      <div ng:controller="App.Controllers.TodoController" id="todoapp">
        <div class="title">
            <h1>
                Todos
            </h1>
        </div>
        <div class="content">
            <div id="todo-form">
            </div>
            <form id="todo-form" ng:submit="addTodo()" >
                <input id="new-todo" name="newTodo" my:blur="addTodo()" placeholder="What needs to be done?" type="text">
                <span class="ui-tooltip-top" ng:show="showHitEnterHint">
                    Press Enter to save this task
                </span>
            </form>
            <div id="todos">
                <ul id="todo-list">
                  <li class="todo" ng:class="'editing-' + todo.editing + ' done-' + todo.done" ng:repeat="todo in todos">
                    <div class="display">
                      <input class="check" type="checkbox" name="todo.done" / >
                      <div ng:click="editTodo(todo)" class="todo-content"> {{ todo.content }} </div>
                      <span class="todo-destroy" ng:click="removeTodo(todo)"></span>
                   </div>
                  <div class="edit">
                    <form ng:submit="finishEditing(todo)">
                        <input class="todo-input" my:focus="todo.editing" my:blur="finishEditing(todo)" name="todo.content" type="text">
                    </form>
                  </div>
                  </li>
                </ul>
            </div>
            <div id="todo-stats">
              <span class="todo-count" ng:show="hasTodos()">
                <ng:pluralize count="remainingTodos()" when="{'0' : 'No items left.', '1': '1 item left.', 'other' : '{} items left.' }">
                </ng:pluralize>
              </span>
              <span class="todo-clear" ng:show="hasFinishedTodos()">
        ...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}
a img {
  border: none;
}

html {
  background: #eeeeee;
}
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4em;
    background: #eeeeee;
    color: #333333;
  }

.clickable{
  cursor:pointer;
}

#todoapp {
    background: none repeat scroll 0 0 white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    background: none repeat scroll 0 0 white;
    margin: 0 auto 40px;
    padding: 20px;
    width: 480px;
}

#todoapp {
  width: 480px;
  margin: 0 auto 40px;
  background: white;
  padding: 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
}
  #todoapp h1 {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    padding: 20px 0 30px 0;
    line-height: 1;
  }

#create-todo {
  position: relative;
}
  #todo-form input {
    width: 466px;
    font-size: 24px;
    font-family: inherit;
    line-height: 1.4em;
    border: 0;
    outline: none;
    padding: 6px;
    border: 1px solid #999999;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
   ...

JavaScript

angular.directive('my:blur', function(expression, compiledElement) {
    var compiler = this;
    return function(linkElement) {
        var scope = this;
        linkElement.bind('blur', function(event) {
            scope.$apply(expression, linkElement);
            event.stopPropagation();
        });
    };
});

angular.directive("my:focus", function(expression, compiledElement){
  return function(element){
    this.$watch(expression, function(){
      if(angular.formatter.boolean.parse(expression)){
        element[0].focus();
      } 
    }, element);
  };
});


App.Controllers.TodoController = function () {
    var self = this;

    self.newTodo = "";

    self.addTodo = function() {
        if (self.newTodo.length === 0) return;
        
        self.todos.push({
            content: self.newTodo,
            done: false,
            editing: false
        });
        self.newTodo = "";
    };

    self.editTodo = function(todo) {
        //cancel any active editing operation
        angular.forEach(self.todos, function(value) {
            value.editing = false;
        });
        todo.editing = true;
    };

    self.finishEditing = function(todo) {
        todo.editing = false;
    };

    self.removeTodo = function(todo) {
        angular.Array.remove(self.todos, todo);
    };

    self.todos = [];

    var countTodos = function(done) {
        return function() {
            return angular.Array.count(self.todos, function(x) {
                return x.done === (done === "done");
            });
        }
    };

    self.remainingTodos = countTodos("undone");

    self.finishedTodos = countTodos("done");

    self.clearCompletedItems = function() {
        var oldTodos = self.todos;
        self.todos = [];
        angular.forEach(oldTodos, function(todo) {
            if (!todo.done) self.todos.push(todo);
        });
    };

    self.hasFinishedTodos = function() {
        return self.finishedTodos() > 0;
    };

    self.hasTodos = function() {
 ...