javascript - 收集重复不起作用

Question

我在 Collection Repeat 中遇到问题。这是我的 Controller 代码:

    .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"
        });
      }


    })

这是 View 文件中的代码:

 <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>

我收到错误:collection-repeat expected attribute collection-item-width to be a expression that returns a number (in pixels) or percentage.

Answer 1

问题是你没有在 HTML 上绑定(bind) photos 查看你的 Controller 代码告诉你正在使用 controllerAs 语法。所以如果你有 ng-controller="RescheduleCtrl as reschedule" 那么你可以在 html 上获取 photos 对象作为 reschedule.photos

标记

<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