こんにちは
Cordova+Onsen UIでモバイルアプリを作成しています。
sqliteデータベースを読み込んでリスト形式で出力しようとしていますが、iOSエミュレータで実行すると図1のように画面レイアウトが崩れてしまいます。
図1
$scope.itemTableに固定のデータをセットすると綺麗に描画されるので
ソースコードのどこかが間違っているのだと思いますが
どのようにデバッグしていけば良いのかがわかりません。
sqliteデータベースの読み込みにはcordova-sqlite-extプラグインを使っています。
ソースコード(の一部)は以下のとおりです。
index.html
<ons-page id="list-page" ng-controller="listController">
<ons-toolbar>
<div class="left"><ons-toolbar-button ng-click="doSomething()"><ons-icon icon="ion-compose"></ons-icon></ons-toolbar-button></div>
<div class="center">Home</div>
<div class="right"></div>
</ons-toolbar>
<ons-list style="margin: -1px 0">
<ons-list-item modifier="chevron" class="item" ng-repeat="item in itemTable" ng-click="showDetail(item)">
<ons-row>
<ons-col width="60px">
<div class="item-thum"></div>
</ons-col>
<ons-col>
<header>
<span class="item-title">{{item.title}}</span>
<span class="item-label">{{item.label}}</span>
</header>
<p class="item-desc">{{item.desc}}</p>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
index.js
angular.module('app').controller("listController", function($scope) {
var items = [];
$scope.queryResult = function() {
var db = window.sqlitePlugin.openDatabase({name: "test.db", location: 2, createFromLocation: 1});
db.transaction(function(tx){
var sql = "SELECT id, title, status FROM items";
tx.executeSql(sql, [],
function(tx, response)
{
for (var i=0; i<response.rows.length; i++ ) {
var row = response.rows.item(i);
items.push({title:row.title, row.id, row.status});
}
},
function(err)
{
alert('error');
}
);
}, errorDB, successDB);
};
$scope.queryResult();
$scope.itemTable = items;
$scope.$apply();
$scope.showDetail = function(item) {
console.log('showDetail')
myNavigator.pushPage("detail.html", {item: item});
};
});
まずはエラーの原因が知りたいですが、
上記のような場合のデバッグ方法なども出来れば知りたいです。
インターネットで色々と検索しましたがなかなか有益な情報が得られていませんので、
ご存知の方がいればリンクでも良いので教えていただければ幸いです。