CODEWITHSUNDEEP
javascriptcssangularjs
HangulSR
HangulSR

Reputation: 259

Angularjs styling on ng-repeat

How do i do styling on ng-repeat? Is it possible to assign a div for it ?

How it look like currently:

enter image description here

How i want it to look like :

enter image description here

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;
    }

If i want to implement it in LI instead
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>

Upvotes: 0

Views: 38

Answers (1)

holydragon
holydragon

Reputation: 6728

See this Plunker.

I implemented ng-repeat for you using sample data I created in the Controller. Once you change it, it should display just like what you want.

This is the line where ng-repeat is used.

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

This is how the data gets displayed by two-way binding {{ }}.

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

Upvotes: 1

Related Questions