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

См. Это Плункер .

Я реализовал ng-repeat для вас, используя образцы данных, которые я создал в Контроллере.После того, как вы измените его, он должен отображаться так, как вы хотите.

Это строка, в которой используется ng-repeat.

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

Вот как данные отображаются двумяспособ связывания {{ }}.

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