AngularJS Example:

by gavinfoley

HTML

<div ng-app="myApp">
     <h2>Todo</h2>

    <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
        <ul class="unstyled">
            <li ng-repeat="todo in todos" class="" alert-box="hello">
                <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span>

            </li>
        </ul>
        <form ng-submit="addTodo()">
            <input type="text" ng-model="todoText" size="30" placeholder="add new todo here" yellow-on-hover>
            <input class="btn-primary" type="submit" value="add">
        </form>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <style> .done-true {
    text-decoration: line-through;
    color: grey;
}

JavaScript

function TodoCtrl($scope) {
    $scope.todos = [{
        text: 'learn angular',
        done: true
    }, {
        text: 'build an angular app',
        done: false
    }];

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

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

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

angular.module("myApp", [])
    .directive("yellowOnHover", function () {
    return {
        restrict: "EACM",
        link: function (scope, element, attrs) {
            element.bind("mouseenter", function () {
                element.css("background", "yellow");
            });
            element.bind("mouseleave", function () {
                element.css("background", "none");
            });
        }
    };
})