Search code examples
javascriptangularjsionic-frameworkionic-view

i want to display array of images on my main screen but it's not working

Code To Display images through angular is in tag.i'm using pic controller and the details of that controller is in angular js file. if someone can help me then please do.

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'];

  ];


});
Solution

  • I see there is some mistake here. Perhaps you could give this a try in order.

    1) Change pic to pic as pic in ng-controller (this is the main problem i see)
    2) remove extra ]; in your controller (maybe is just typo in your code snippet)
    3) Check browser console to see whether the image url exist (try with web image to see whether it is working)

    <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'
  ];
});