Creating dynamic Ionic slides by fetching data from a database

I am currently experimenting with Ionic. Web development is not my strong suit, so I may be a bit off the mark. However, I would like to retrieve data from an SQLite database and display it on an ion-slide-box.

Here is what I have attempted:

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

Unfortunately, this method does not seem to work as the slidebox does not update and all the results are displayed on the same slide instead of separate slides. I have tried multiple approaches, but none seem to meet my requirements without using SQLite plugins.

Answer №1

It seems like you may be approaching this task with a JQuery mindset instead of an Angular one, but don't worry, it's a common mistake for beginners to make. Angular is all about templates and not direct DOM manipulation (except for directives).

To get started, create a template that utilizes ng-repeat on a set of slides stored in a scope variable. Here's an example:

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

In the controller, place the results into a scope variable like so:

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

Then, use ng-repeat on the results in the template:

<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>

Remember, this is just a starting point to guide you in the right direction.

I recommend brushing up on the basics and fundamentals before diving in further. Here are some helpful articles to get you started:

If you're hungry for more resources, check out:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular - Uploading Files

Within my $scope.accept function, I am attempting to upload some files to my server. The process works fine when using the tag in my HTML. However, I wish to prevent the page from redirecting and instead handle this with AJAX in my controller. When tryin ...

Creating a SAS URL for Azure Blob storage in Node.js using the generateBlobSASQueryParameters method from the @azure/storage-blob module

Hello, I am working with an Azure storage account where I upload and create a SAS URL to download images. Below is the code snippet that I have used: const { BlobServiceClient, StorageSharedKeyCredential, BlobSASPermissions, generateBlobSASQueryPar ...

Tips for implementing Papa Parse to parse CSV files using JavaScript

I've been exploring their API without much luck. My goal is to extract data from CSV files that are sent to the client upon server entry. Here's the code snippet I attempted: // Attempting to parse local CSV file Papa.parse("data/premier leagu ...

How can I stop an element from losing focus?

One issue I'm facing is that when I have multiple elements with the tabindex attribute, they lose focus when I click on any area outside of them. The Problem - In traditional desktop applications, if an element is not able to receive focus, clicking ...

Filtering a collection in Firestore using the `where()` method for a context provider in Next.js

i encountered an issue: when using the useEffect function to retrieve my firestore documents, it works well. Currently, I am fetching all "profiles" documents (3 in total). However, I now want to only retrieve the documents where the field "workerProfile" ...

Monitor the true/false status of each element within an array and update their styles accordingly when they are considered active

Currently, I am attempting to modify the active style of an element within an array. As illustrated in the image below - once a day is selected, the styles are adjusted to include a border around it. https://i.stack.imgur.com/WpxuZ.png However, my challe ...

What causes the index to consistently be the final index when passing it to the MenuItem onClick function while iterating over a State array using map?

There is an array of objects living in a state named talks [ { "firstName": "B", "lastName": "W", "day": "2022-09-30T23:06:26.000Z", "reasons": [ ...

Troubleshooting issue: Next.js Material-ui CSS SSR not functioning properly within components

Upon completing my project, I discovered that SSR for Material-ui is not functioning on the page where I utilized functional components. Here is my _document.js file: [Code from _document.js] Example Page: [Code from E ...

Problems with Wordpress AJAX search functionality

I am currently working on implementing a search feature using AJAX to dynamically load posts. However, I am facing an issue where the results are not being displayed. This code snippet was adapted from another source and modified based on private feedback ...

tips for incorporating jade Mixin in JavaScript

Experimenting with test mixins in jade language mixin test(testName) #test span Test String Desire to incorporate this functionality into javascript (as declared in the jade file) script(type='text/javascript'). $( document ).on( "cli ...

When running scripts, Protractor is unable to perform a click action in Safari, even though it works perfectly in

Currently, I am in the process of developing an angular application and utilizing directconnect for Chrome and Firefox. All my test scripts are functioning as expected, however, a new requirement has been introduced to run these same tests on Safari. To ...

Automating the deployment of a vue.js app using GitLab CI/CD pipeline to deploy to

Currently experiencing an issue with the pipelines involving my YAML file that automates deployment of a Vue app to Firebase. Despite including scripts in the file and setting up the Environment variable FIREBASE_TOKEN on GitLab, pushing the code to a GitL ...

Transferring data between different elements in a React application

I am currently learning React and facing some challenges in terms of passing data between components. Even after reviewing various tutorials and blogs, I am still struggling to make things work. Within my project, I have two child components named Body-c ...

Experimenting with the static method within a singleton class using Typescript and Sinon

I have a separate layer in my application that uses a DAO class to retrieve data from the repository. I've implemented the DAO class as a Singleton and made its methods static. In another class, I've created service methods to manipulate the dat ...

Analyzing the structure according to the month/week/year

My array consists of count and date values: day = [ { count: 1, date: '2022-07-07' }, { count: 1, date: '2022-08-14' }, { count: 2, date: '2022-07-19' }, { count: 4, date: '2022-07-19' }, { count: 2, date: ...

Send live information to router-link

I'm struggling to pass a dynamic path to vue-router, but I can't seem to get the syntax right. Here's what I've been attempting: <li v-on:click="$emit('closeDropdown')"><router-link :to="item.route" id="button">{{ ...

JSON object fails to iterate with ng-repeat

It must be the scorching temperature... Having a json object that I'm eager to loop through using ng-repeat, it should be straightforward, but alas! it's just not cooperating. Here's the HTML snippet: <a data-ng-repeat="x in template.m ...

Is there a way to direct to a specific URL upon clicking a button using PHP?

In my PHP code called registerprocess.php, it executes after clicking a submit button on another page named userregistration.php. If a user tries to register with an email that already exists in the database, I want registerprocess.php to redirect back to ...

The process of reversing an array is not fully completing due to the pop method being used within a loop

Note: I've been immersed in code for hours now and have reached a stage where I'm starting to doubt the spelling of every word or question if I have dyslexia. Despite this, I know this should be a simple question. I want to create a basic functi ...

Automatically include the date as a column heading along with name and ID

I recently came across a guide on how to dynamically add dates as column headers in a table. However, I encountered an issue where I couldn't add new columns for 'Name', 'Age', and 'Section' before the dynamically generat ...