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

Question

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

  ];


});

try to change, this.photos to $scope.photos – Zaid Mirza Oct 29 '16 at 12:36 — Zaid Mirza, Oct 29 '16 at 12:36
have you injected $scope in controller and tried? – Zaid Mirza Oct 29 '16 at 12:57 — Zaid Mirza, Oct 29 '16 at 12:57

score -1 · Accepted Answer · answered Oct 29 '16 at 13:33

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

Can you please help... its working fine but when i try to run it with ionic serve or localhost. It's not working — Azhar Ch, Oct 30 '16 at 10:47

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

1 Answers1