如何在ng-repeat上进行样式设置?是否可以为其分配div?
目前的样子:
我希望它看起来如何:
HTML:
<div class="displaySubCategory">
<div class="categoryImg">
<img src="img/csvIcon.png" />
<img src="img/shpIcon.png" />
</div>
<div class="categoryDesc">
<p>Dengue (Cases) - Central</p>
<a href="" ng-click="download()">Download</a> | <a href="">View on
map</a> | <a href="#!/displayCommunity">View Data</a>
</div>
CSS:
.displaySubCategory {
width: 80%;
height: auto;
margin: 0 auto;
position: relative;
border: 0.5px;
border-style: solid;
border-color:#D3D3D3;
box-shadow: 5px 7px 5px #D3D3D3;
padding-left: 30px;
padding-top: 10px;
margin-top:10px;
padding-bottom: 30px;
}
.categoryImg{
display:inline-block;
vertical-align: top;
}
.categoryDesc {
display: inline-block;
padding-left: 10px;
}
如果我想在LI中实现它
HTML:
<ul>
<li ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize">
{{communityTheme.THEMENAME}}
<a ng-href="https://assets.onemap.sg/shp/{{SHPFile}}" ng-click="getSHP(communityTheme.QUERYNAME)" target="_blank" download>SHP</a> |
<a ng-href="https://assets.onemap.sg/kml/{{KMLFile}}" ng-click="getKML(communityTheme.QUERYNAME)" target="_blank" download>KML</a> |
<a href=>View on Map</a>
</li>
</ul>
答案 0 :(得分:1)
请参阅此Plunker。
我使用在Controller中创建的样本数据为您实现了ng-repeat。 更改后,它应显示为您想要的样子。
这是使用ng-repeat
的行。
<div class="displaySubCategory" ng-repeat="place in places">
这是通过双向绑定{{ }}
显示数据的方式。
<p>{{ place.name }}</p>