AngularJS Todo with PouchDB backend
This is the AngularJS Todo example with a PouchDB backend. Here's the original example: http://jsfiddle.net/dakra/U3pVM/
by dirkk0
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/pouchdb/2.2.2/pouchdb.min.js"></script>
<h2>Todo</h2>
<div ng-controller="MainCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="removeDone()">Remove done</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" ng-click="updateTodo(todo)">
<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>
CSS
.done-true {
text-decoration: line-through;
color: grey;
}
JavaScript
function MainCtrl($scope) {
$scope.todos = [];
$scope.pouchdb = Pouch('idb://angularpouchtodo', function(err, db) {
if (err) {
console.log(err);
}
else {
db.allDocs(function(err, response) {
if (err) {
console.log(err);
}
else {
$scope.loadTodos(response.rows);
}
});
}
});
$scope.loadTodos = function(todos) {
for (var i = 0; i < todos.length - 1; i++) {
var todo = todos[i];
$scope.pouchdb.get(todo.id, function(err, doc) {
if (err) {
console.log(err);
}
else {
$scope.$apply(function() {
$scope.todos.push(doc);
});
}
});
};
}
$scope.addTodo = function() {
var newTodo = {
_id: Math.uuid(),
text: $scope.todoText,
done: false
};
$scope.todos.push(newTodo);
$scope.todoText = '';
$scope.pouchdb.put(newTodo);
};
$scope.updateTodo = function(todo) {
$scope.pouchdb.put(todo);
};
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.removeDone = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) {
$scope.todos.push(todo);
}
else {
$scope.removeTodo(todo);
}
});
};
$scope.removeTodo = function(todo) {
$scope.pouchdb.get(todo._id, function(err, doc) {
if (err) {
console.log(err);
}
else {
...