Add the cordova plugin multi-image-picker with the following command

onDeviceReady: function() {
    window.imagePicker.getPictures(
        function(results) {
            for (var i = 0; i < results.length; i++)
            {
                alert('Image URI: ' + results[i]);
            }
        }, function (error) {
            alert('Error: ' + error);
        });
    }

This plugin allows selecting multiple images from the gallery. I have successfully used it to select multiple images, but now I need to display them in the HTML view section. SuccessCB - Callback function when image is selected.

FailCB - Callback function when no image is selected.

Options - See Options

htmlcssangularjscordova

Answer №1

Store the results data into a scope variable and then display it in HTML (from your perspective).

onDeviceReady: function() {
window.imagePicker.getPictures(
    function(results) {
        for (var i = 0; i < results.length; i++)
        {
           $scope.imagelist.push(results[i]);
            alert('Image URI: ' + results[i]);
        }
    }, function (error) {
        alert('Error: ' + error);
    });
}

In the HTML:

 <div ng-repeat="img in imagelist"><img ng-src="img"></div>

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

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

javascriptcssreactjswebpackstyled-components

What is the best way to arrange cards in a horizontal stack for easy carousel viewing later on

My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides. The approach I am considering involves stacking multiple card-decks and smoothly transitioning to th ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

The navigation bar text spills over the designated area

I'm facing an issue in the front end where the navbar does not adjust on narrow screens, causing text to overflow. Although it works fine on wide monitors and mobile screens, iPads in portrait view have the last section of the navbar extend outside of ...

htmlcssnavbar

Limiting zero is ineffective when it comes to pop-up issues

Hey there, I'm looking to prevent users from inputting zero and dot in a specific field, which is currently working fine. However, when the field is within a pop-up, the code below doesn't seem to work. <script> $('#name').keyp ...

javascriptjqueryhtmlcss

angularjs unable to render included file

I am currently working on setting up a simple node-express angular application that involves using an ng-include directive. Here is the structure of my application: App: server.js package.json public: js css index.html partials: header.html partial-a ...

node.jsangularjsexpressangularjs-ng-include

Passing parameters from HTML forms using Node.js

I'm currently facing an issue where I am trying to pass a parameter from an HTML form to a NodeJS router. The routing is working as expected, but the parameter value comes up as undefined. In the past, I have successfully passed parameters by making ...

htmlnode.jsformsexpresspost

Adding a line break in a Buefy tooltip

I am trying to show a tooltip with multiple lines of text, but using \r\n or is not working. <b-tooltip label="Item 1 \r\n Item 2 \r\n Item 3" size="is-small" type="is-light" position="is-top" animated multilined> ...

javascripthtmlvue.jsvuejs2buefy

Display a series of messages using an Angular directive

Here is a sample HTML code: <section class="correspondence"> <header> <div class="from">{{ message.from }}</div> <div class="when">{{ message.when }}</div> </header> <div class="content"> { ...

javascriptangularjs

Is it necessary for me to replicate this function? - jQuery

I have developed a function that creates a transparent information overlay on a current div for a mobile web app. Context: I am using jQTouch, which means I have separate divs instead of loading individual pages anew. $(document).ready(function() { ...

javascriptjqueryhtmlcssjqtouch

(iOS) Detecting input from keys with non-ascii characters captured

I am attempting to subscribe to physical keyboard events (excluding non-ASCII keys) in my app developed using the Ionic Framework (issue arises when trying to access a page launched by ionic serve, deploying the app on my iOS device, or running it in an iO ...

iosangularcordovaionic3

Creating a dynamic table in HTML and Angular is a simple process that involves utilizing the

How can I create an HTML table dynamically without knowing the template of each row in advance? Sometimes it may have 2 columns, sometimes 4... I am looking for something like this: <div> <h1>Angular HTML Table Example</h1> < ...

htmlangulartypescript

Add a square div in every direction around the existing content in an HTML file

Begin by locating square number 1. Once you press the + symbol above square 1, square 2 will appear. From there, you can click the + on the right side of square 2 to reveal square 3. Is it possible to achieve this sequence? If so, what is the best way to ...

javascriptjqueryhtml

Ensure every individual input field in a Bootstrap form is validated using JavaScript before submitting the form

As a newcomer to Javascript, I am seeking assistance with validating each field in the form below without having to click on the submit button. Your help is greatly appreciated! <form action="" id = "form1" class = "form-group row"> & ...

javascripthtmlbootstrap-4

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

Whenever I try to select an option in my select box, a dotted rectangle appears. How do I remove this feature? I have noticed that many others are also facing the same issue. I tried updating my CSS with some properties based on their suggestions, but it ...

javascriptcss

Align numbers vertically inside scrollbar center

I have created a program where you can input a number, and it will count from 0 to the specified number. Currently, the numbers are aligned horizontally up to 12 before starting on a new line. However, I would like the numbers to be arranged vertically fr ...

javascriptcsshtml

width of the cells within the grid table

What is the best way to ensure the width alignment of cells in both the header and main section? I have highlighted the correct option in the image with green checkmarks. Check out the image here. Here is my example and solution: View the code on CodePen. ...

javascriptcssvue.js

The bootstrap modal display issue: black background visible

In my HTML file, there are two modal dialogs that seem to be causing an issue. Interestingly, whichever modal dialog is placed first in the sequence of the HTML code displays properly when the button is clicked (and vice versa). Both modal dialogs have u ...

jqueryhtmlbootstrap-4bootstrap-modal

Using AngularJS to create a resource with specific file type extension and making a POST request

When using Angular $resource, it does a great job handling POST and GET queries without a resource ID by intelligently removing the trailing slash: resource('/users/:user',{user:'@id'},{}) This will result in: GET /users/25 (for User ...

angularjs

Unable to proceed due to lint errors; after conducting research, the issue still remains

I'm still getting the hang of tslint and typescript. The error I'm encountering has me stumped. Can someone guide me on resolving it? I've searched extensively but haven't been able to find a solution. Sharing my code snippet below. (n ...

javascriptjqueryangularjstypescripttslint

When using Angular, the function `$window.location.assign` does not properly load within a controller when trying to

After implementing $window.location.assign('#/someurl'); in a controller, the URL hashtag updates but fails to load. .when("/signin", { templateUrl: templateSource+"/signin", controller: function($scope, $location, $window){ ...

angularjs