[英]AngularJS: ng-repeat across multilple divs
I would like to have part of my website be a collage of images and information as shown below: 我希望我的网站的一部分是图像和信息的拼贴,如下所示:
I can do this manually as a series of divs: 我可以手动执行此操作作为一系列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>
and the following CSS: 和以下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;
}
I have now started playing with AngularJS as a way to more easily display this information. 我现在开始使用AngularJS来更轻松地显示这些信息。
I have MainController.js 我有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]
]
});
I have then used 我已经用过了
<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>
This puts all the options one underneath each other. 这将所有选项放在一起。 I can see why this is, as it doesn't create the options div around each set of 3 as I had done when making it manually.
我可以看出为什么会这样,因为它没有像我手工制作时那样在每组3中创建选项div。 Is it possible to achieve this with the ng-repeat or do I need to rethink how I am doing it?
是否有可能通过ng-repeat实现这一点,还是我需要重新思考我是如何做到的?
I am very new to web development so please make your answers beginner friendly, and bear with me if I have to ask for clarification. 我是网络开发的新手,所以请让你的答案初学友好,如果我要求澄清,请耐心等待。 I am also open to people suggesting a better or simpler way of doing things, I merely used Codecademy's AngularJS course as a starting point.
我也向那些建议采用更好或更简单的做事方式的人开放,我只是以Codecademy的AngularJS课程为出发点。
This can easily be achieved by using css flex property 这可以通过使用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%;
}
Read more flex property here : https://css-tricks.com/almanac/properties/f/flex/ 阅读更多flex属性: https : //css-tricks.com/almanac/properties/f/flex/
JS solution JS解决方案
A really simple solution is to group your list into sublists of 3 elements: 一个非常简单的解决方案是将列表分为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"
}],
//...
]
and then just add one more ng-repeat
directive 然后再添加一个
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:'£'}}</h3>
</div>
</div>
</div>
</div>
CSS solution CSS解决方案
Another simple solution with CSS is to use flex-direction: row
and then set the flex
property accordingly on the elements. CSS的另一个简单解决方案是使用
flex-direction: row
,然后在元素上相应地设置flex
属性。 Here's a code pen using the bootstrap library . 这是使用引导程序库的代码笔 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.