从数据库动态添加离子幻灯片

Question

我目前正在尝试离子。我真的不习惯这种网络开发，所以我可能完全偏离了轨道。无论如何，我想访问一个 SQLite DB 并将结果添加到一个 ion-slide-box。

我正在尝试类似的东西：

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();
}
});

所以这不起作用，幻灯片框没有更新，我在同一页面上获得了所有结果（而不是将它们放在不同的幻灯片上），我尝试了多种方法，我相信这不是最好的方法处理它，但我找不到任何符合我需要的东西。

我也在尽量避免使用 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/