使用 Onsen-ui 将数据库中的数据显示到 Phonegap 应用程序中

Question

我正在使用 Onsen-Ui 开发应用程序。我使用 Websql 数据库存储一些列表并希望在页面中显示。但是数据被取回后，不显示。但是当我单击导航栏上的某个按钮时，会出现整个列表视图。这是js代码。

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

    loadingViewOne.show();
    $scope.isEditing = false;
    $scope.myChecked = false;
    $scope.downloadedLists = [];
    this.store = new WebSqlStore(function() {
    });
    //alert('webstore start');
    this.store.retrieveAll(function(allPublications){
        //alert('webstore finished');
        $scope.downloadedLists = allPublications; // allPublications is data from DB
        $scope.$apply //------------------This is the answer...
        $scope.finishedRetrieving = true;
        loadingViewOne.hide();
        //appendListView(allPublications);
    });

}

这是HTML代码..

<ons-list ng-show="finishedRetrieving"><!-- List Item -->
<ons-list-item ng-repeat="rows in downloadedLists">
    <br><!--Space between Rows-->
    <ons-row>
        <ons-col width="33.33%" ng-repeat="list in rows"><!-- Column Grid Item-->

            <button class="button button--quiet" style="width: 100%" ng-click="downloadNav.pushPage('readingView.html', {issueNo: list})" ng-disabled="isEditing">
                <img src="services/pics/{{list.pic}}" width="100%" height = "100%" />
            </button>

            <p style="text-align: center; width: 95%;">{{list.firstName}}</p>
        </ons-col>

    </ons-row>
</ons-list-item>

提前致谢...

Answer 1

尝试使用 $scope.$apply();，它会更新出价。

您可以找到更多相关信息here

使用 Onsen-ui 将数据库中的数据显示到 Phonegap 应用程序中

Display data from database into Phonegap app using Onsen-ui

javascript

jquery

cordova

phonegap-build

onsen-ui