javascript - 从数据库动态添加 ionic 幻灯片

Question

我目前正在尝试 ionic 。我不太习惯这种网络开发，所以我可能完全偏离了轨道。不管怎样，我想访问 SQLite 数据库并将结果添加到 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>

在我们的 Controller 中，让我们获取这些结果并将它们放入范围变量中。我将在这里编写一些“理论”代码，因为我没有关于您上面所做的事情的上下文。

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/