I am trying to showcase a collection of images on my homepage, but unfortunately, it is not functioning as expected

Does anyone know how to display images using Angular? I am currently utilizing the pic controller in an AngularJS file. Any assistance would be greatly appreciated.

HTML CODE

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
     <link href="css/animate.css" rel="stylesheet">
</head>
<body ng-app="starter" >

  <ion-pane>   
    <div class="bar bar-header bar-dark">
      <button class="button button-icon icon ion-navicon"></button>
      <h1 class="title">AdsCafe</h1>
    </div> 
  </ion-pane>
    <div ng-controller="pic" >
      <ion-content>
         <img collection-repeat="photo in pic.photos"
         item-height="33%" item-width="33%"
         ng-src="{{photo}}">
      </ion-content>

    </div>

</body>
</html>

Code To set angular array to proper controller

ANGULAR JS CODE

angular.module('starter', ['ionic'])
.controller('pic', function() {
  this.photos = ['../img/a.gif','../img/b.gif','../img/c.gif','../img/d.gif','../img/qw.gif'];

  ];


});

Answer №1

It seems like there might be an error in this code snippet. Here are some suggestions to fix it:

1) Change pic to pic as pic in your ng-controller (this appears to be the main issue)
2) Remove the extra ]; at the end of your controller code snippet (it may just be a typo)
3) Check the browser console to confirm if the image URL exists, and try using a web image to test if it works properly.

<div ng-controller="pic as pic" >
    <ion-content>
       <img collection-repeat="photo in pic.photos"
       item-height="33%" item-width="33%"
       ng-src="{{photo}}">
    </ion-content>
</div>

angular.module('starter', ['ionic'])
.controller('pic', function() {
  this.photos = [
      'https://dummyimage.com/600x400/000/fff',
      'https://dummyimage.com/600x400/eee/fff',
      'https://dummyimage.com/600x400/aaa/fff'
  ];
});

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

Ways to retrieve a converted document using the Microsoft Graph API

I'm encountering an issue when trying to save a PDF file received from the Microsoft Graph API. The call I am making looks like this: const convertConfig = { headers: { Authorization: <my token> } }; convertConfig.headers['C ...

Transmitting information from directive to parent scope controller

I've successfully implemented a directive that generates a Google map on the page. Now, my goal is to pass the map object back out of the directive and into the parent controller. This will allow me to utilize it in various methods as needed. While ...

Dynamically Inject HTML with Drag-and-Drop Interaction

Looking for an easy method to move html elements or content around on a webpage? The objective is to drag the element and release it onto a designated area. After dropping the element, customized html content will be added dynamically depending on ...

Modifying the maximum length of input fields in HTML, Javascript, and PHP is possible by adjusting the value through

Hi there, I'm facing an issue that should be easy for you guys to help me with. I recently discovered a security flaw while using the maxlength function in HTML. Users can easily modify the maxlength attribute by inspecting elements on the website, wh ...

Extract latitude and longitude data using Mapbox's autocomplete feature

Currently, I have integrated Mapbox with autocomplete in a Vue component: <template> <div> <div id='geocoder'></div> </div> </template> <script> import mapboxgl from 'mapbox-gl& ...

Adding or modifying attributes on a component selector in real-time

@Component({ selector: 'ion-col', templateUrl: 'components-field.html' }) export class FieldComponent { @HostBinding('attr.layout') layout = '¯\_(ツ)_/¯'; element: any; constructor() ...

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

Error encountered while adding the Cordova platform, specifically with Android

Whenever I attempt to execute cordova platform add android, whether it's coming from an Ionic or Cordova Project, the following error pops up: /c/Users/USERNAME/AppData/Roaming/npm/cordova: line 14: 1200 Illegal instruction node "$basedir/node_m ...

Ways to filter and display multiple table data retrieved from an API based on checkbox selection in Angular 2 or JavaScript

Here is a demonstration of Redbus, where bus data appears after clicking various checkboxes. I am looking to implement a similar filter in Angular 2. In my scenario, the data is fetched from an API and stored in multiple table formats. I require the abili ...

Retrieve the current element when the key is released and send it as a parameter to a different function

Imagine a scenario where my website contains textbox elements that are dynamically generated, each with the class 'mytxt'. <input type="text" class="mytxt" /> <input type="text" class="mytxt" /> <input type="text" class="mytxt" /& ...

Implementing AngularJS to store data in a JSON object

Imagine having an animals.json file with the following details: { "animals": { "elephant": { "size": "large" }, "mouse": { "size": "small" } } } Now, let's say this data is being added to the controller scope: anim ...

Establishing a constant for a JavaScript class method

Although this question may seem basic, I am struggling to grasp how this code works and felt the need to seek clarification here. Take a look at this example of a simple React component: const title = React.createElement( 'h1', {id: &apo ...

What is causing the discrepancy in functionality between these two HTML/CSS files with identical code?

In this codepen, you'll find the first example: Subpar Pen: https://codepen.io/anon/pen/jGpxrp Additionally, here is the code for the second example: Excellent Pen: https://codepen.io/anon/pen/QqBmWK?editors=1100 I'm puzzled why the buttons l ...

The Canvas element inside a Bootstrap modal is returning inaccurate mouse coordinates

I am currently troubleshooting an issue with a HTML5 canvas inside a Bootstrap modal. The canvas is designed to be a selection game where objects can be selected and manipulated. Everything works fine in the center of the 600x600px canvas, but there is an ...

When dynamically adding rules to jQuery validate, I encountered an unexpected error

My dynamic form validation with jQuery validate involves a drop-down menu on my HTML that includes values 1, 2, 3, and 4. Depending on the selection made from the drop-down, different div elements are displayed with corresponding fields. All the input fie ...

Obtain file paths from a folder using JavaScript

Currently, I am in the process of developing an npm package that validates imported images. Can anyone provide some insights on how to instruct javascript to iterate through a specific directory and store the file paths in an array? Furthermore, my aim is ...

Can Three.js be used to create a compact canvas?

I've successfully implemented a three.js scene on my website where users can drag to rotate an object. However, I don't want the scene to take up the entire webpage. I tried adjusting the field parameters with the following code: renderer.setSiz ...

Using express.static can cause an issue with a Nodejitsu application

I'm completely puzzled by this issue that keeps cropping up. Whenever I try to add a static path to my app, I encounter an error on the hosting platform I use called "nodejitsu". The error message indicates that the application is not functioning prop ...

Adjusting the color of a box in Threejs through dat.gui.min.js controls

I want to enhance the user experience by allowing them to choose a color from the HEX menu and update the color of the box in the scene using UI controls. Below is the JavaScript code I have implemented for this purpose: // author: Arielle Mueller // date ...

Achieving functionality for the searchbox in the Bootstrap navbar

I'm currently working on implementing a search function that functions properly when query parameters are directly inserted into the URL. However, I am struggling to make it work by entering the search query into the search box and executing it from t ...