javascript - AngularJS:跨多个 div 的 ng-repeat
问题描述
我想让我的网站的一部分是图像和信息的拼贴,如下所示:
我可以作为一系列 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: £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: £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: £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: £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: £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: £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:'£'}}</h3>
</div>
</div>
</div>
这将所有选项放在一起。我可以明白为什么会这样,因为它没有像我在手动制作时那样围绕每组 3 个选项创建选项 div。是否有可能通过 ng-repeat 实现这一目标,还是我需要重新考虑我是如何做到的?
我对网络开发非常陌生,所以请让您的答案对初学者友好,如果我必须要求澄清,请多多包涵。我也欢迎人们提出更好或更简单的做事方式,我只是使用 Codecademy 的 AngularJS 课程作为起点。
解决方案
这可以通过使用 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:'£'}}</h3>
</div>
</div>
</div>
.hotel-container {
display: flex;
}
.options {
width : 33.33%;
}
在此处阅读更多 flex 属性:https ://css-tricks.com/almanac/properties/f/flex/
推荐阅读
- c++ - 如何防止在 C++ 中访问 dll 中的函数
- sql - 是否可以在win10上安装DB2以供C程序访问,使用Cygwin?
- vue.js - Vue路由器重定向命名组件不缺少参数?
- html - CDK 虚拟卷轴没有 dom
- sql - 条件连接 SQL 如何连接
- c++ - v.size()-1 背后的逻辑?
- python - 对于折线图(matplotlib,pandas)的数据框中缺少 x 值,如何将 y 值设置为 0
- pywinauto - 无法使用 PyWinAuto 单击按钮
- firebase - 如何使用颤振网络从 Firebase 电话身份验证中删除验证码?
- node.js - 如何在钩子前在摩卡咖啡中使用 async/await?