Question

js app

现在在html中我用户ng-repeat

<div class="row">
 <div ng-repeat="item in Photos" class="col col-33"style="border:none">
    <img ng-src="{{item.image}}" imageonload style="width:100px;height:120px;margin-left:auto;margin-right:auto;display:block">
  </div>
</div>

我的问题是我在列表中有5张图片，但只有3张在dipslay上。显示屏上未显示另外2个。我该如何解决问题？

提前致谢

Answer 1

您的图片可能在Photos数组中具有相同的网址值，因此您需要将ng-repeat与track by $index一起使用

<div class="row">
 <div ng-repeat="item in Photos track by $index" class="col col-33"style="border:none">
    <img ng-src="{{item.image}}" imageonload style="width:100px;height:120px;margin-left:auto;margin-right:auto;display:block">
  </div>
</div>

Answer 2

尝试使用col-xs-2代替col-33：

<div class="row">
  <div ng-repeat="item in Photos" class="col col-xs-2">
    <img ng-src="{{item.image}}">
  </div>
</div>

Answer 3

$scope.imagearray = {
       'images' : []
  };
 var i,j,temparray,chunk = 3;
 for (i=0,j=$scope. Photos.length; i<j; i+=chunk) {
   temparray = $scope. Photos.slice(i,i+chunk);
        $scope.imagearray.images.push(temparray);
  }

    <div  ng-repeat="img in imagearray.images">
        <span ng-repeat="item in img" ></span>
        </div>

Angularjs ng-重复更多数据

3 个答案: