2016-07-07 177 views
1

我已經使用AngularJS,Monaca和Onsen UI創建了一個跨平臺的應用程序。AngularJS從SQLite數據庫填充選擇下拉列表

我已經創建了一個SQLite數據庫來存儲應用程序中的本地信息,以便隨時可以脫機使用。

我創建SQLite數據庫和表並向其中插入值,所有這一切都工作,因爲它應該 - 下面爲示例代碼的CREATE和INSERT形式我的意見app.js控制器

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數據庫保存結果訪問此我視圖

$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] 
} 

在我鑑於我有一個選擇下拉框,在這裏我想填充值下拉項來回我的SQLite數據庫列。

我嘗試使用ng-options但是沒有值顯示在下拉列表中。以下是我的觀點,選擇我嘗試填充值的位置。

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

我可以直接訪問值這樣還是我需要轉換從SQLite的JSON到第一?

+0

您需要將您的數據http://stackoverflow.com/a/9036552/1618775轉換成JSON –

回答

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" 
相關問題