Angular with PouchDB native promises
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/pouchdb/2.2.0/pouchdb.min.js"></script>
<div ng-app="myapp" ng-controller="AppController">
<button ng-click="populate()">Populate Database</button>
<button ng-click="init()">Load data from Database</button>
<h1>List : </h1>
<ul>
<li ng-repeat="item in data track by item._id">{{item.name}}
<button ng-click="remove(item, $index)">x</button>
</li>
</ul>
</div>
JavaScript
var app = angular.module("myapp", []);
app.controller('AppController', function ($scope, Database) {
var db = new Database('test');
$scope.init = function () {
db.all()
.then(function (result) {
$scope.data = result;
});
};
$scope.populate = function () {
db.create({
name: 'One'
});
db.create({
name: 'Two'
});
db.create({
name: 'Three'
});
};
$scope.remove = function (item, index) {
db.remove(item);
$scope.data.splice(index, 1);
};
$scope.db = db;
});
app.factory('Database', function ($q) {
var _db,
_databaseName;
var Database = function (databaseName) {
_databaseName = databaseName;
_db = new PouchDB(_databaseName);
};
Database.prototype.all = function () {
var options = {
include_docs: true
};
return $q.when(_db.allDocs(options))
.then(function (result) {
var converted;
converted = result.rows.map(function (element) {
return element.doc;
});
return converted;
});
};
Database.prototype.create = function (record) {
return $q.when(_db.post(record))
.then(function (result) {
return _db.get(result.id);
});
};
Database.prototype.remove = function (record) {
return $q.when(_db.remove(record));
};
return Database;
});