Collection repeat does not work

Question

I have a problem in the Repeat collection. Here is my controller code:

    .controller('RescheduleCtrl', function($scope){
    this.photos = [];
      for (var i = 0; i < 100; i++) {
        var w = 100 + Math.floor(Math.random() * 200);
        w -= w % 5;
        var h = 150 + Math.floor(Math.random() * 100);
        h -= h % 5;
        this.photos.push({
          width: w,
          height: h,
          src: "1995"
        });
      }


    })

This is the code as a file:

 <ion-scroll direction="x" class="available-scroller">
  <div class="photo" collection-repeat="photo in photos"
     item-height="250" item-width="photo.width + 30">
 {{photo.src}}
  </div>
</ion-scroll>

I got an error: reassembling the expected attribute collection-item-width will be an expression that returns a number (in pixels) or a percentage.

Answer 1

The problem is that you are not required photosto HTML, which looks at your controller code, says that you are using syntax controllerAs. So, if you have one ng-controller="RescheduleCtrl as reschedule", you can get the object photosin html asreschedule.photos

Markup

<ion-scroll direction="x" class="available-scroller">
  <div class="photo" collection-repeat="photo in reschedule.photos"
     item-height="250" item-width="photo.width + 30">
 {{photo.src}}
  </div>
</ion-scroll>

Working codepen

Answer 2

If you want to click something, you must add this → " "

Su, your script will look like this:

.controller('RescheduleCtrl', function($scope){
    this.photos = [];
      for (var i = 0; i < 100; i++) {
        var w = 100 + Math.floor(Math.random() * 200);
        w -= w % 5;
        var h = 150 + Math.floor(Math.random() * 100);
        h -= h % 5;
        this.photos.push({
          "width": w,  /* Here are the edits */
          "height": h,
          "src": "1995"
        });
      }


    })

Hope this worked for you.