AngularJS Example:
by beltiste
HTML
<div ng-app>
<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">
<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">
<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.8/angular.min.js"></script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
CoffeeScript
TodoCtrl = ($scope) ->
$scope.todos = [
text: "learn angular"
done: true
,
text: "build an angular app"
done: false
]
$scope.addTodo = ->
$scope.todos.push
text: $scope.todoText
done: false
$scope.todoText = ""
$scope.remaining = ->
count = 0
angular.forEach $scope.todos, (todo) ->
count += (if todo.done then 0 else 1)
count
$scope.archive = ->
oldTodos = $scope.todos
$scope.todos = []
angular.forEach oldTodos, (todo) ->
$scope.todos.push todo unless todo.done