收集重复无效

Question

我在“收集重复”中遇到问题。 这是我的控制器代码：

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


    })

这是视图文件中的代码：

 <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期望属性collection-item-width是一个返回数字（以像素为单位）或百分比的表达式。

Answer 1

问题是您没有在HTML上绑定photos ，而是看着控制器代码告诉您正在使用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>

工作码笔

Answer 2

如果要推送某些内容，则必须添加这些内容-> " "

如此..您的脚本将是这样的：

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


    })

我希望这对你有用