從數據庫動態添加離子玻片

Question

我目前正在嘗試使用離子玻片。我不太習慣這種網頁開發，所以我可能完全偏離軌道。無論如何，我想訪問SQLite數據庫並將結果添加到離子滑塊。

我是想這樣的事情：

function selectResultSuccess(tx, results) 
{ 
var div = ""; 
div += "<ion-slide-box >"; 
for (var i = 0 ; i < len ; i++) 
    { 
    div+="<ion-slide>" 
    div+= results.rows.item(i).Result ; 
    div+="</ion-slide>" 
    } 
div += "</ion-slide-box >"; 
$(".result-list").html(div); 
} 

HTML：

<ion-content ng-controller="ExampleController" class="result-list"> 
</ion-content> 

app.js：

angModule.controller("ExampleController", function($scope,  $ionicSlideBoxDelegate) { 
$scope.navSlide = function(index) { 
    $ionicSlideBoxDelegate.slide(index, 500); 
} 
$scope.nextSlide = function() { 
    $ionicSlideBoxDelegate.next(500); 
} 
$scope.update = function() { 
    $ionicSlideBoxDelegate.update(); 
} 
}); 

所以這並不工作，slidebox沒有更新並且我在同一頁面上獲得了所有結果（而不是將它們放在不同的幻燈片上），我嘗試了多種方法，前夕這不是最好的方式來處理，但我找不到任何符合我需要的東西。

我也試圖避免使用SQLite插件。

Answer 1

所以，你完全錯了，但沒關係。你犯的初學者錯誤仍然是JQuery的思維方式，而不是Angular的思維方式。每個人都經歷過它。

所以，Angular基於模板，而不是DOM操作（除指令外）。你想要做的是建立一個模板，在一組幻燈片上做一個ng-repeat，存儲在某種範圍變量中。

讓我們先從這一點：

<ion-content ng-controller="ExampleController" class="result-list"> 
    <ion-slide-box></ion-slide-box> 
</ion-content> 

在我們的控制器，讓我們這些結果，並把它們在一個範圍內變化。我將在這裏做一些「理論」的代碼，因爲我沒有上面你在做什麼的背景。

angModule.controller("ExampleController", function($scope, $ionicSlideBoxDelegate) { 
    $scope.results = results; 
}); 

一旦我們有範圍的結果，讓我們做對結果的ng-repeat。

<ion-content ng-controller="ExampleController" class="result-list"> 
    <ion-slide-box> 
     <ion-slide ng-repeat="result in results">{{result}}</ion-slide> 
    </ion-slide-box> 
</ion-content> 

再一次，這不是完整的代碼，更多的指向正確的方向。

我建議從一些基本知識和基礎知識開始。

建議從這些文章：

http://mcgivery.com/structure-of-an-ionic-app/

http://mcgivery.com/creating-views-with-ionic/

http://mcgivery.com/controllers-ionicangular/

如果你想要更多的學習資源：

http://mcgivery.com/100-ionic-framework-resources/