CODEWITHSUNDEEP
cssangularjs
user3727514
user3727514

Reputation: 273

How do I add css elements to ng-repeat templates?

I have this html code: 

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}' name='test' class="box">
  </div>
</div>

and this css: 

.box {
  padding: 5px;
}

but when I try and implement it in this plunkr: http://plnkr.co/edit/y5WWgKtdPHQuBQTOWXU1?p=preview , it doesn't work (no padding, the images are touching) I also notice that if I inspect the image element with the developer tools (chrome), the class is named "box ng-scope". So I guess the name changed. So first of all, why did this change, and where can I learn more about it. Second of all, and more importantly, how do I call the items instantiated by angular with css so that I can style them?

Upvotes: 0

Views: 383

Answers (2)

LazerSharks
LazerSharks

Reputation: 3155

You forgot to include your stylesheet in your index.html file.

Just like how you included the .js, etc., you need to include your css file at the top of your html document

add:

<link rel="stylesheet" type="text/css" href="style.css">

e.g. 

<script type='text/javascript' src='jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script type='text/javascript' src='ng-infinite-scroll.min.js'></script>
<script src="script.js"></script>
<!-- You needed to add this line below -->
<link rel="stylesheet" type="text/css" href="style.css">

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}' name='test' class='box'>
  </div>
</div>

Upvotes: 1

Sean Walsh
Sean Walsh

Reputation: 8344

Your stylesheet isn't included in the Plunker. With the stylesheet included, it works fine: http://plnkr.co/edit/B0r5DlNjskQ2AmNsTFBF?p=preview

Also, the addition of "ng-scope" to the class doesn't affect anything here. An element can have multiple classes and you can target the element with any one of the classes (or a combination of them). For example, this div can be targeted with .c1, .c2, or .c1.c2:

<div class="c1 c2"></div>

Upvotes: 1

Related Questions