Miuler/jsbin.eJOVofO.coffee

## jsbin.eJOVofO.coffee
class BaseCtrl
    constructor: ->
        console.log("All your base are belong to us!")

    toJson: (item) ->
        JSON.stringify(item)

class TodoCtrl extends BaseCtrl
    constructor: (@$scope) ->
        super
        console.log(@$scope)
        @todos = [
            {text: "learn angular", done: true}
            {text: "build an angular app", done: false}]

    addTodo: ->
        @todos.push({ text: @todoText, done: false })
        @todoText = ""

    remaining: ->
        count = 0
        for todo in @todos when todo.done
            count++
        count

    archive: ->
        oldTodos = @todos
        @todos = []
        angular.forEach(oldTodos, (todo) =>
            @todos.push(todo) unless todo.done
        )

    toJson: ->
        super @todos

TodoCtrl.$inject = ["$scope"]

angular.module("todoApp", [])
    .controller("TodoCtrl", TodoCtrl)

## jsbin.eJOVofO.css
.done-true {
    text-decoration: line-through;
    color: grey;
}

## jsbin.eJOVofO.html
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
    <h2>Todo</h2>
    <div id="app-container" ng-controller="TodoCtrl as ctrl">
        <span>{{ctrl.remaining()}} of {{ctrl.todos.length}} remaining</span>
        [ <a href="" ng-click="ctrl.archive()">archive</a> ]
        <ul class="unstyled">
            <li ng-repeat="todo in ctrl.todos">
                <input type="checkbox" ng-model="todo.done">
                <span class="done-{{todo.done}}">{{todo.text}}</span>
            </li>
        </ul>
        <form ng-submit="ctrl.addTodo()">
            <input type="text" ng-model="ctrl.todoText" size="30"
                placeholder="add new todo here">
            <input class="btn-primary" type="submit" value="add">
        </form>
        <textarea readonly cols="40" rows="20">{{ctrl.toJson()}}</textarea>
    </div>
</body>
</html>
	class BaseCtrl
	constructor: ->
	console.log("All your base are belong to us!")

	toJson: (item) ->
	JSON.stringify(item)

	class TodoCtrl extends BaseCtrl
	constructor: (@$scope) ->
	super
	console.log(@$scope)
	@todos = [
	{text: "learn angular", done: true}
	{text: "build an angular app", done: false}]

	addTodo: ->
	@todos.push({ text: @todoText, done: false })
	@todoText = ""

	remaining: ->
	count = 0
	for todo in @todos when todo.done
	count++
	count

	archive: ->
	oldTodos = @todos
	@todos = []
	angular.forEach(oldTodos, (todo) =>
	@todos.push(todo) unless todo.done
	)

	toJson: ->
	super @todos

	TodoCtrl.$inject = ["$scope"]

	angular.module("todoApp", [])
	.controller("TodoCtrl", TodoCtrl)
	<!DOCTYPE html>
	<html ng-app="todoApp">
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
	</head>
	<body>
	<h2>Todo</h2>
	<div id="app-container" ng-controller="TodoCtrl as ctrl">
	<span>{{ctrl.remaining()}} of {{ctrl.todos.length}} remaining</span>
	[ <a href="" ng-click="ctrl.archive()">archive</a> ]
	<ul class="unstyled">
	<li ng-repeat="todo in ctrl.todos">
	<input type="checkbox" ng-model="todo.done">
	<span class="done-{{todo.done}}">{{todo.text}}</span>
	</li>
	</ul>
	<form ng-submit="ctrl.addTodo()">
	<input type="text" ng-model="ctrl.todoText" size="30"
	placeholder="add new todo here">
	<input class="btn-primary" type="submit" value="add">
	</form>
	<textarea readonly cols="40" rows="20">{{ctrl.toJson()}}</textarea>
	</div>
	</body>
	</html>