22857


こんにちは

Cordova+Onsen UIでモバイルアプリを作成しています。

sqliteデータベースを読み込んでリスト形式で出力しようとしていますが、iOSエミュレータで実行すると図1のように画面レイアウトが崩れてしまいます。

図1

* * *

[![画像の説明をここに入力](https://i.stack.imgur.com/21coN.png)](https://i.stack.imgur.com/21coN.png)

* * *

$scope.itemTableに固定のデータをセットすると綺麗に描画されるので  
ソースコードのどこかが間違っているのだと思いますが  
どのようにデバッグしていけば良いのかがわかりません。

sqliteデータベースの読み込みにはcordova-sqlite-extプラグインを使っています。

ソースコード（の一部）は以下のとおりです。

index.html

[code]

            <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>
    
[/code]

index.js

[code]

    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});
        };
    });
    
[/code]

まずはエラーの原因が知りたいですが、  
上記のような場合のデバッグ方法なども出来れば知りたいです。  
インターネットで色々と検索しましたがなかなか有益な情報が得られていませんので、  
ご存知の方がいればリンクでも良いので教えていただければ幸いです。


CC BY-SA 3.0
2016-03-03T15:08:06.960
22774
2016-03-06T13:51:11.310
12362
question
onsen-ui cordova sqlite
画面レイアウトが崩れる


結果的に以下のように変更したら動きました。  
変更点はDBのオープンの部分とons.readyの中に書いた部分です。  
またコールバックにした部分が非同期通信に対応できたのだと思います。

[code]

    angular.module('app').controller('listController', function ($scope) {
    
        var items = [];
        ons.ready(function() {
            var db = window.sqlitePlugin.openDatabase({name: "test.db"});
            db.transaction(function(tx) {
                var sql = "SELECT * 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, label:row.id, desc:row.status});
                    }
                }, errorCB);
            }, errorCB, successCB);
        });
    
        function successCB() {
            $scope.itemTable = items;
            $scope.$apply();
        }
    
        function errorCB(err) {
            alert("Error processing SQL: "+err.message);
        }
    
        $scope.showDetail = function(item) {
            console.log('showDetail');
            myNavigator.pushPage("detail.html", {item: item});
        };
    });
    
[/code]


CC BY-SA 3.0
2016-03-06T12:46:29.920
22857
2016-03-06T13:51:11.310
2016-03-06T13:51:11.310
9566
12362
22774
answer