javascript - AngularJS 从 SQLite 数据库中填充选择下拉列表

Question

我使用 AngularJS、Monaca 和 Onsen UI 创建了一个跨平台应用。

我已经创建了一个 SQLite 数据库来将信息本地存储在应用程序中，以便随时离线使用。

我创建了 SQLite 数据库和表并向其中插入值，所有这一切都正常工作 - 下面是我的 View app.js Controller 中的 CREATE 和 INSERT 示例代码。

app.js

function createDB(tx)
{
    tx.executeSql('DROP TABLE IF EXISTS tb_my_list');
    tx.executeSql('CREATE TABLE IF NOT EXISTS tb_my_list (id INTEGER PRIMARY KEY, name, score)');

    tx.executeSql('INSERT INTO tb_my_list (id, name, score) VALUES (01, "Name 1", 111)');
    tx.executeSql('INSERT INTO tb_my_list (id, name, score) VALUES (02, "Name 1", 222)');   
}

然后我声明一个变量来保存 SQLite 数据库的结果，以便在我的 View 中访问它。

$scope.DatabaseData = [];

function queryDB(tx)
{
    tx.executeSql('SELECT * FROM tb_my_list', [], querySuccess, errorCB);
}

function querySuccess(tx, results)
{
    var len = results.rows.length; // Shows "2" - as INSERTED values
    $scope.databaseData = results; // Returns [object SQLResultSet]
}

在我的 View 中，我有一个选择下拉框，我想用来 self 的 SQLite 数据库 name 列的值填充下拉项.

我尝试使用 ng-options 但下拉列表中没有显示任何值。以下是我尝试填充值的 View 选择。

<select ng-model="myDataDropDown" ng-options="databaseData.id as databaseData.name for databaseData in DatabaseData"><option value="" label="-- Please Select --"></option></select>

我可以像这样直接访问 name 值，还是需要先从 SQLite 转换为 JSON？

Answer 1

你可以像这样从响应中创建一个普通的数组对象

 function querySuccess(tx, results)
{
    var len = results.rows.length; 
    var output_results = [];

    for (var i=0; i<len; i++){
       var theItem = results.rows.item(i);
       output_results.push(theItem.name);
    }
    $scope.databaseData = output_results;
}

然后像这样使用一个简单的 ngoption

ng-options="item for item in databaseData

但是，如果您想要列表中的名称值对，那么...有点不同。

 function querySuccess(tx, results)
{
    var len = results.rows.length; 
    var output_results = [];

    for (var i=0; i<len; i++){
       var theItem = results.rows.item(i);
       output_results.push({id: theItem.id,'name': theItem.name});
    }
    $scope.databaseData = output_results;
}

然后像这样使用一个复杂的 ngoption

ng-options="option.name for option in databaseData track by option.id"