Question

如何在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>

Answer 1

请参阅此Plunker。

我使用在Controller中创建的样本数据为您实现了ng-repeat。更改后，它应显示为您想要的样子。

这是使用ng-repeat的行。

<div class="displaySubCategory" ng-repeat="place in places">

这是通过双向绑定{{ }}显示数据的方式。

<p>{{ place.name }}</p>

ng-repeat上的Angularjs样式

1 个答案: