Question

我有一个对象数组，其中我有图像的网址。我需要在旋转木马中显示这些图像：

<div class="item active">
    <div class="row cst-carouselImg">
        <div class="col-sm-3 col-xs-6" ng-repeat="image in pack.hotels.current.hotelImages | limitTo:'4'">
            <a href="#"><img
                         ng-src="<?php
                         echo 'http://photos.hotelbeds.com/giata/';
                         ?>{{image.path}}"
                         alt="Image" class="img-responsive"></a>
        </div>
    </div>
</div>

此时我只有阵列中的前4张图片。接下来，我将显示阵列中接下来的4个图像：

<div class="item">
     <div class="row cst-carouselImg">
         <div class="col-sm-3 col-xs-6" ng-repeat="image in pack.hotels.current.hotelImages" ng-if="$index > 3 && $index <8">
             <a href="#"><img
                         ng-src="<?php echo 
                         'http://photos.hotelbeds.com/giata/';
                         ?>{{image.path}}"
                         alt="Image" class="img-responsive"></a>
         </div>
    </div>
</div>

如何使用 ng-repeat 显示所有图片，而不是手动添加<div class="item">并手动设置$ index？

Answer 1

这里我采取一些示例数组，您可以相应地修改它

＆＃13;

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.hotelImages=[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7}];
$scope.loopCount=Math.ceil($scope.hotelImages.length/4);
$scope.getNumber = function(num) {
    var arr=[];
    for(i=0;i<num;i++){
    arr.push(i);
    }
    return arr;   
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div  ng-app="myApp" ng-controller="MyCtrl">

<div class="item" ng-repeat="i in getNumber(loopCount) track by $index">
Carousel :-{{i}}
     <div class="row cst-carouselImg">
    
         <div class="col-sm-3 col-xs-6" ng-repeat="image in hotelImages" ng-if="$index >=(i*4) && $index <(i*4)+4"  >
            image:- {{image.id}}
         </div>
    </div>
</div>
</div>

＆＃13;

Answer 2

如果我理解正确的话，你的目标是进行嵌套的ng-repeat，一个用于项目，一个用于图像。如果我误解了您或您需要澄清，请告诉我。请参阅下面的代码：

var app = angular.module("app", []);

app.controller('exampleCtrl', function($scope){
  $scope.hotels= [
    [
      {
        path: "hotel1 path1",
        otherprop: true
      },
      {
        path: "hotel1 path2",
        otherprop: false
      },
      {
        path: "hotel1 path3",
        otherprop: true
      }
    ],
    [
      {
        path: "hotel2 path1",
        otherprop: true
      },
      {
        path: "hotel2 path2",
        otherprop: true
      }
    ],
    [
      {
        path: "hotel3 path1",
        otherprop: false
      },
      {
        path: "hotel3 path2",
        otherprop: false
      },
      {
        path: "hotel3 path3",
        otherprop: false
      },
      {
        path: "hotel3 path4",
        otherprop: true
      }
    ]
  ];
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="exampleCtrl">
    <div class="item" ng-repeat="hotel in hotels">
      <p>This is Hotel #{{$index+1}}</p>
         <div class="row cst-carouselImg">
             <div class="col-sm-3 col-xs-6" ng-repeat="image in hotel">
                 <a href="#">
                   <img ng-src="{{image.path}}" class="img-responsive" alt="(this is alt text)"/>
                   Image {{$index+1}}'s path: {{image.path}}
                 </a>
             </div>
        </div>
    </div>    
  </div>
</div>

AngularJS + bootstrap轮播有助于显示所有图像

2 个答案: