javascript - 将 Angular ng-repeat 绑定(bind)到 WebSQL/SQLite

Question

在 Cordova 应用程序中，我一直在尝试像这样绑定(bind) Angular 标记:

<table class="table table-striped table-responsive">
                            <thead>
                                <tr>
                                    <th>Rotation</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>DOB</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in dtPatients track by item.fldRotation">
                                    <td>{{item.fldRotation}}</td>
                                    <td>{{item.fldID}}</td>
                                    <td>{{item.fldTitle + " " + item.fldForename + " " + item.fldSurname}}</td>
                                    <td>{{item.fldDOB | date:'dd/MMM-yy'}}</td>
                                </tr>
                            </tbody>
                        </table>

Controller 中的简单 WebSQL 事务如下:

tx.executeSql("Select * from [tblPatients];"
                        , []
                        , function (tx, results) {
                            if (results.rows.length == 0) {
                                $scope.dtPatients = null;
                                $scope.$apply();
                            }
                            else {
                                // We have records so we create an array of the results
                                $scope.dtPatients = results.rows;
                                $scope.$apply();
                                debugger;
                            }
                        }
                        , function (tx, err) {
                            console_log("Error retrieving patients.");
                            $scope.dtPatients = null;
                            logdberror(err.code, err.message);
                            errorsource = -1;
                            ShowError('PatientsController1 load patients', err.code.toString + " " + err.message);
                            $scope.$apply();
                        }
                    );

这会产生一个错误，唯一的解决方法是使用所示的代码 here将行转换为数组。我注意到作者在链接中记录的错误，但我不确定这是我遇到的错误。我还尝试将 ng-repeat 从上面显示的更改回我从

开始时所拥有的

ng-repeat="item in dtPatients"

无论哪种方式，我都会不断收到相同的错误。在绑定(bind)之前，SQL Resultset 一定不需要先转换成数组吧？

报错如下:

10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":17,"oldVal":15}],[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":19,"oldVal":17}],[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":21,"oldVal":19}],[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":23,"oldVal":21}],[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":25,"oldVal":23}]] at Error (native) at localhost:4400/scripts/angular.min.js:6:417 at n.$get.n.$digest (localhost:4400/scripts/angular.min.js:124:185) at n.$get.n.$apply (localhost:4400/scripts/angular.min.js:126:293)

在此先感谢您的帮助/建议。

Answer 1

好吧，经过几天的研究，我找到了答案，所以我想我会弹出并发布它，以防其他人想知道如何将 Angular 绑定(bind)到 SQLite/WebSQL 结果集。

在上面的问题中，我有一个异步返回结果时的回调函数:

else {
    // We have records so we create an array of the results
    $scope.dtPatients = results.rows;
    $scope.$apply();
    debugger;
}

这似乎触发了错误所指的无限循环。我不知道如何或为什么，也许有更好的 Angular 经验的人可以回答这个问题。然而，我找到的解决方案不是像我上面提到的链接那样手动构建一个字符串数组，而是更改代码以像这样一步完成:

else {
    // We have records so we create an array of the results
    $scope.dtPatients = JSON.parse(JSON.stringify(results.rows));
    $scope.$apply();
    debugger;
}

基本上是“字符串化”，然后将其转换回 JSON 对象。我希望我知道为什么你不能只绑定(bind)到 SQLite 结果集，但现在这是我能得到的下一个最佳修复/解决方法，而且据我所知，无论如何这是正确的方法。