Encountering an issue while trying to retrieve data from openDatabase and display it in a listview. Following advice from a thread, I added $scope.$apply(); after $scope.items = $data;, but this resulted in an error:
[$rootScope:inprog] $apply already in progressindex.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
</head>
<body>
<ons-navigator var="navi">
<ons-page>
<ons-toolbar>
<div class="center">I Spent</div>
<div class="right" ng-controller="AddExpendController">
<ons-toolbar-button ng-click="">
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list ng-controller="AppController">
<ons-list-item class="item" ng-repeat="item in items" ng-click="showDetail($index)">
<ons-row>
<ons-col width="60px">
<div class="item-thum"></div>
</ons-col>
<ons-col>
<header>
<span class="item-title">$ {{item.e_cost}}</span>
<span class="item-label">{{item.e_created}}</span>
</header>
<p class="item-desc">{{item.e_memo}}</p>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</body>
</html>
index.js
(function () {
'use strict';
var module = angular.module('app', ['onsen']);
var db = window.openDatabase("ispentdb", "1.0", "I Spending DB", 2000000);
module.factory('$data', function () {
var listItems = [];
db.transaction(function queryDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS exptable');
tx.executeSql("Create Table IF NOT EXISTS exptable (eid INTEGER PRIMARY KEY, e_cost text, e_memo text, e_picture text, e_created text)");
tx.executeSql('INSERT INTO exptable (e_cost, e_memo, e_created) VALUES ("2.30","testing","2015-4-13")', []);
tx.executeSql('INSERT INTO exptable (e_cost, e_memo, e_created) VALUES ("2.32","testing","2015-4-12")', []);
tx.executeSql('select * from exptable order by eid DESC', [], function (tx, result) {
console.log("Returned rows = " + result.rows.length);
for (var i = 0; i < result.rows.length; i++) {
listItems.push({ e_cost: result.rows.item(i).e_cost, e_memo: result.rows.item(i).e_memo, e_created: result.rows.item(i).e_created });
}
});
});
console.log(listItems);
return listItems;
});
module.controller('AppController', function ($scope, $data) {
console.log($data);
$scope.items = $data;
});
})();
The problem was resolved when using the following method:
(function () {
'use strict';
var module = angular.module('app', ['onsen']);
module.controller('AppController', function ($scope) {
var db = window.openDatabase("ispentdb", "1.0", "I Spending DB", 2000000);
db.transaction(function (tx) {
tx.executeSql("Create Table IF NOT EXISTS exptable (eid INTEGER PRIMARY KEY, e_cost text, e_memo text, e_picture text, e_created text)");
}, errorDB, successDB)
function errorDB(err) {
alert("Error processing SQL: " + err)
}
function successDB() {
db.transaction(function queryDB(tx) {
tx.executeSql('select * from exptable order by eid DESC', [], function querySuccess(tx, result) {
var listItems = [];
console.log("Returned rows = " + result.rows.length);
for (var i = 0; i < result.rows.length; i++) {
listItems.push({ e_cost: result.rows.item(i).e_cost, e_memo: result.rows.item(i).e_memo, e_created: result.rows.item(i).e_created });
}
$scope.items = listItems;
$scope.$apply();
})
});
}
})
})();