发布绑定 Angular ng-repeat 到 WebSQL/SQLLite

Question

在 Cordova 应用程序中，我一直在尝试像这样绑定 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>

控制器中的简单 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 所示的代码将行转换为数组。我注意到作者在 link 中提到的错误，但我不确定这是我遇到的错误。我还尝试将 ng-repeat 从上面显示的更改回我从

开始时所拥有的

ng-repeat="item in dtPatients"

无论哪种方式，我总是遇到同样的错误。在绑定之前肯定没有必要将 SQL 结果集转换为数组？

这是给出的错误：

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

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

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

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

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

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

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

发布绑定 Angular ng-repeat 到 WebSQL/SQLLite

Issue binding Angular ng-repeat to WebSQL/SQLLite

javascript

sqlite

web-sql

angularjs

cordova