Collection repeat is not working

Question

I have a problem in Collection Repeat. 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 in view 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 Error: collection-repeat expected attribute collection-item-width to be a an expression that returns a number (in pixels) or percentage.

Answer 1

The problem is you are not binding photos on HTML looking at you controller code tells that you are using controllerAs syntax. So if you have ng-controller="RescheduleCtrl as reschedule" then you can get photos object on html as reschedule.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 push something you have to add this things --> " "

Soo.. your script would be 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"
        });
      }


    })

I hope this worked for you