Permalink
Browse files

Step 4: AngularJS controller and two-way data binding

  • Loading branch information...
vkarpov15 committed Jul 25, 2013
1 parent 0ded5ae commit bc89f2c811fd94ef0259a782bcb8cd2c8fd932a7
Showing with 30 additions and 20 deletions.
  1. +10 −0 public/javascripts/controllers/TodoListController.js
  2. +17 −19 views/index.jade
  3. +3 −1 views/layout.jade
@@ -0,0 +1,10 @@
function TodoListController($scope) {
$scope.todos = [];
$scope.doneFilter = { done : true };
$scope.notDoneFilter = { done : false };
$scope.setTodos = function(todos) {
$scope.todos = todos;
};
}
View
@@ -3,26 +3,24 @@ extends layout
block head
link(rel='stylesheet', href='/javascripts/vendor/bootstrap-css/css/bootstrap.css')
script(type='text/javascript', src='/javascripts/controllers/TodoListController.js')
block content
div.container
div.container(ng-controller="TodoListController", ng-init="setTodos( #{JSON.stringify(todos)} )")
h1 My Todo List
h2 Upcoming
- each todo in todos
- if (!todo.done)
div.row
div.span9
label.checkbox
input(type="checkbox")
| #{todo.description}
div.span3.text-right
i #{todo.due.toDateString()}
div.row(ng-repeat="todo in todos | filter:notDoneFilter")
div.span9
label.checkbox
input(type="checkbox", ng-model="todo.done")
| {{todo.description}}
div.span3.text-right
i {{todo.due | date:'MMM d, yyyy'}}
h2 Done
- each todo in todos
- if (todo.done)
div.row
div.span9
label.checkbox
input(type="checkbox", checked="true")
del #{todo.description}
div.span3.text-right
i #{todo.due.toDateString()}
div.row(ng-repeat="todo in todos | filter:doneFilter")
div.span9
label.checkbox
input(type="checkbox", ng-model="todo.done")
del {{todo.description}}
div.span3.text-right
i {{todo.due | date:'MMM d, yyyy'}}
View
@@ -1,9 +1,11 @@
doctype 5

This comment has been minimized.

Show comment
Hide comment
@ndbinh99

ndbinh99 Jun 26, 2014

this should be doctype html, right ?

@ndbinh99

ndbinh99 Jun 26, 2014

this should be doctype html, right ?

This comment has been minimized.

Show comment
Hide comment
@vkarpov15

vkarpov15 Jun 26, 2014

Owner

Yeah, see 26e9247

@vkarpov15
html
html(ng-app)
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src='/javascripts/vendor/angular/angular.js')
block head
body

0 comments on commit bc89f2c

Please sign in to comment.