javascript - ng-repeat 上的 Angularjs 样式

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">

这是双向绑定(bind) {{ }} 显示数据的方式。

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