Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="./bower_components/angular/angular.min.js"></script>
<script src="todo.js"></script>
</head>
<body>
<div>
<h1>Hello</h1>
<div ng-controller="TodoListController">
<span>{{remaining()}} of {{todos.length}}</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span>{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here">
<input type="submit" value="add">
</form>
</div>
</div>
</body>
</html>
/// <reference path="./typings/index.d.ts" />
class Todo {
constructor(public text: string, public done: boolean = false) { }
}
interface TodoScope extends ng.IScope {
todos: Array<Todo>;
todoText: string;
addTodo: Function;
remaining: Function;
archive: Function;
}
class TodoListController {
constructor(private $scope: TodoScope) {
$scope.todos = [
new Todo('learn angular', true),
new Todo('build an angular app', false)
];
$scope.addTodo = angular.bind(this, this.addTodo);
$scope.remaining = angular.bind(this, this.remaining);
$scope.archive = angular.bind(this, this.archive);
console.log($scope.todos);
}
addTodo() {
this.$scope.todos.push(new Todo(this.$scope.todoText, false));
this.$scope.todoText = '';
}
remaining(): number {
var count = 0;
angular.forEach(this.$scope.todos, (todo) => {
count += todo.done ? 0 : 1;
});
return count;
}
archive() {
var oldTodos = this.$scope.todos;
this.$scope.todos = [];
angular.forEach(oldTodos, (todo) => {
if (!todo.done) {
this.$scope.todos.push(todo);
}
});
}
}
var app = angular.module('todoApp', [])
app.controller('TodoListController', ['$scope', TodoListController]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment