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


Tags: css,angularjs

Problem :

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?



Solution :

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>

    CSS Howto..

    How to modify the CSS Properties (height width) of a div element via JQuery?

    CSS - How to move an absolutely positioned item relatively to its current position

    CSS Sprites - How to Align-bottom all Sprite Buttons

    How to remove and override CSS attribute from parent class?

    How to have menu items streched in full width menu with css for any screen automatically

    How to set 3 div's to fit the screen width

    how to overwrite RadWindow control CSS classes with mine?

    How can I make a filter like this? [closed]

    How to apply background color to buttons using css in asp.net?

    How to move menu to the right of the logo and to clean up unused space?

    how to make sure that that grid layout row adjusts the height automatically as per content

    How to have background-image and gradient background-color work on one selector in CSS?

    How to pull all CSS rules on an element together

    How to disable button using jquery in materialize css

    How to show div property that is in a class with javascript

    how to load a css for Safari only?

    How to make a transition effect that just perform like css transition?

    How to apply different styles based on the number oif col in a table

    How to use objects returned by a function?

    How to style a completely different element when hovering over another element(with different parents)? [duplicate]

    how do angularJS user handle - using bootstrap css/fonts but exclude the jquery controls - scenario

    CSS - How to add a second gradient to make this button half transparent?

    How to create shapes in css? [closed]

    In CSS how do I affect links of only 1 class

    How do I achieve a fully working image scrolling effect like in this example?

    how to use static folder in django for css and javascript?

    how to style in css: product…(price)?

    How to add a half circle at the bottom middle of my header?

    How to fill an entire area in the body?

    How to reduce css http requests?