AngularJS-从openDatabase获取数据
[英]AngularJS - Fetch data from openDatabase
问题描述
我有一个问题，我想从openDatabase获取数据并放入listview。 有人说放$scope.$apply(); 在$scope.items = $data; 但是发生错误： [$rootScope:inprog] $apply already in progress 。 这是我的代码。
的index.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;
});
})();
但是如果我使用这种方法就没有问题：
(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('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")', []);
}, 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();
})
});
}
})
})();
2 个解决方案
解决方案1
0 2015-04-15 17:36:07
您可以使用$scope.$evalAsync()代替$scope.$apply() 。 它将触发摘要循环：
$scope.$evalAsync(function() {
// Update data here.
});
解决方案2
0 2015-04-16 07:10:43
经过一番研究，终于我找到了解决方案。 不知道这是一个完美的解决方案。 但它有效。 尝试看看家伙。
(function () {
'use strict';
var module = angular.module('app', ['onsen']);
var db = window.openDatabase("ispentdb", "1.0", "I Spending DB", 2000000);
module.controller('AppController', function ($scope,readData) {
var ac = this;
ac.refreshList = function () {
readData.transaction().then(function (data) {
$scope.items = data;
})
};
$scope.insexp = function () {
var cost = parseInt(document.getElementById('cost').value);
var memo = document.getElementById('memo').value;
if (cost == "") {
alert("Please insert number");
} else {
cost = cost.toFixed(2);
db.transaction(function (tx) {
tx.executeSql('INSERT INTO exptable (e_cost, e_memo, e_created) VALUES (?,?,?)', [cost, memo, gettodayDate()]);
});
dialog.hide();
ac.refreshList();
document.getElementById('cost').value = "";
document.getElementById('memo').value = "";
}
}
$scope.dialogs = {};
$scope.show = function (dlg) {
if (!$scope.dialogs[dlg]) {
ons.createDialog(dlg).then(function (dialog) {
$scope.dialogs[dlg] = dialog;
dialog.show();
});
}
else {
$scope.dialogs[dlg].show();
}
}
function gettodayDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
var today = yyyy + '-' + mm + '-' + dd;
return today;
}
function init(){
ac.refreshList();
}
init();
})
module.factory('readData', function ($q) {
var localData = [];
var data = [];
var selectAllStatement = "SELECT * FROM exptable order by eid DESC";
return {
transaction : function () {
var deferred = $q.defer()
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)");
tx.executeSql("SELECT * FROM exptable order by eid DESC", [], function (tx, result) {
var dataset = result.rows;
console.log(result.rows.length);
for (var i = 0; i < result.rows.length; i++) {
data[i] = dataset.item(i);
}
deferred.resolve(data)
})
})
return deferred.promise
}
}
})
})();
从数据库中获取数据并在AngularJS中的ng-repeat中使用它
[英]Fetch data from database and use it in ng-repeat in AngularJS
使用AngularJS从JSON中的数据库中获取数据并将其显示到文本框中
[英]Fetch data from database in JSON using AngularJS and display it to the textbox
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.