Question

我希望我的网站的一部分是图像和信息的拼贴，如下所示：

我可以手动执行此操作作为一系列div：

<div class="options">
    <div class="option">
        <a href="https://www.handpickedhotels.co.uk/bailbrookhouse"><img class="opt_img" src="images/hotels/BBH.jpg"></a>
        <h3 class="centered" id="hotel_info">Bailbrook House Hotel<br>BA1 7JD<br>Approx Price: &pound;xx</h3>
    </div>
    <div class="option">
        <a href="https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel"><img class="opt_img" src="images/hotels/bath_central_travelodge.jpg"></a>
        <h3 class="centered" id="hotel_info">Bath Central Travelodge<br>BA1 2EB<br>Approx Price: &pound;xx </h3>
    </div>
    <div class="option">
        <a href="https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel"><img class="opt_img" src="images/hotels/bath_waterside_travelodge.jpg"></a>
        <h3 class="centered" id="hotel_info">Bath Waterside Travelodge<br>BA2 4JP<br>Approx Price: &pound;xx</h3>
    </div>
</div>
<div class="options">
    <div class="option">
        <a href="https://www.premierinn.com/gb/en/hotels/england/somerset/bath/bath-city-centre.html"><img class="opt_img" src="images/hotels/Bath_premier_inn.jpg"></a>
        <h3 class="centered" id="hotel_info">Bath City Centre Premier Inn<br>BA1 2BX<br>Approx Price: &pound;xx</h3>
    </div>
    <div class="option">
        <a href="https://www.yha.org.uk/hostel/yha-bath"><img class="opt_img" src="images/hotels/YHA.jpg"></a>
        <h3 class="centered" id="hotel_info">YHA Bath<br>BA2 6LA <br>Approx Price: &pound;xx </h3>
    </div>
    <div class="option">
        <a href="https://www.bailbrooklodge.co.uk/"><img class="opt_img" src="images/hotels/bailbrook_lodge.jpg"></a>
        <h3 class="centered" id="hotel_info">Bailbrook Lodge<br>BA1 7HZ<br>Approx Price: &pound;xx</h3>
    </div>

和以下CSS：

*{
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif
}

#hotel_info{
    background-color: rgba(130, 130, 130,0.7);
    width: 80%;
}

.centered {
    position: absolute;
    width: 100%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.options{
    width: 100%;
    overflow: hidden;
}

.option {
    position: relative;
    text-align: center;
    width: 33%;
    float:left;
}

.opt_img{
    width: 100%;
    opacity: 0.7;
}

我现在开始使用AngularJS作为更轻松地显示此信息的方法。

我有MainController.js

app.controller('MainController', function($scope){
    $scope.title = 'Hotels';
    $scope.hotels = [
        {
            name: 'Bailbrook House Hotel',
            postcode: "BA1 7JD",
            price: 0.00,
            website: "https://www.handpickedhotels.co.uk/bailbrookhouse",
            img: "images/hotels/BBH.jpg"
        },
        {
            name: "Bath Central Travelodge",
            postcode: "BA1 2EB",
            price: 0.00,
            website: "https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel",
            img: "images/hotels/bath_central_travelodge.jpg"
        },
        {
            name: "Bath Waterside Travelodge",
            postcode: "BA2 4JP",
            price: 0.00,
            website: "https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel",
            img: "images/hotels/bath_waterside_travelodge.jpg"
        },
        //... [and so on]
    ]
});

我已经使用了

<div ng-controller="MainController">
    <div class = "options" ng-repeat="hotel in hotels">
        <div class = "option">
            <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
            <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'&pound;'}}</h3>
        </div>
    </div>
</div>

这会将所有选项置于彼此之下。我可以看出为什么会这样，因为它没有像我手工制作时那样在每组3中创建选项div。是否有可能通过ng-repeat实现这一点，还是我需要重新思考我是如何做到的？

我对网络开发很陌生，所以请让你的答案初学友好，如果我要求澄清，请耐心等待。我也向那些建议采用更好或更简单的做事方式的人开放，我只是以Codecademy的AngularJS课程为出发点。

Answer 1

使用css flex属性

可以轻松实现

<div ng-controller="MainController" class="hotel-container">
    <div class = "options" ng-repeat="hotel in hotels">
        <div class = "option">
            <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
            <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'&pound;'}}</h3>
        </div>
    </div>
</div> 

.hotel-container {
   display: flex;
}
.options {
  width : 33.33%;
}

在此处阅读更多flex属性：https://css-tricks.com/almanac/properties/f/flex/

Answer 2

JS解决方案

一个非常简单的解决方案是将您的列表分组为3个元素的子列表：

 $scope.hotels = [
    [{
      name: 'Bailbrook House Hotel',
      postcode: "BA1 7JD",
      price: 0.00,
      website: "https://www.handpickedhotels.co.uk/bailbrookhouse",
      img: "images/hotels/BBH.jpg"
    }, {
      name: "Bath Central Travelodge",
      postcode: "BA1 2EB",
      price: 0.00,
      website: "https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel",
      img: "images/hotels/bath_central_travelodge.jpg"
    }, {
      name: "Bath Waterside Travelodge",
      postcode: "BA2 4JP",
      price: 0.00,
      website: "https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel",
      img: "images/hotels/bath_waterside_travelodge.jpg"
    }],
    //...
  ]

然后再添加一个ng-repeat指令

<div ng-controller="MainController">
  <div ng-repeat="group in hotels">
    <div class = "options" ng-repeat="hotel in group">
      <div class = "option">
        <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
        <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'&pound;'}}</h3>
      </div>
    </div>
  </div>
</div>

CSS解决方案

CSS的另一个简单解决方案是使用flex-direction: row，然后在元素上相应地设置flex属性。这是code pen使用bootstrap library。

AngularJS：跨多个div进行ng-repeat

2 个答案: