So I wanted to do something in AngularJS for every 2nd item in my ng-repeat. I’m using Bootstrap’s rows and columns so I wanted to get some padding in between them without using an offset.
I’m just using col-md-6 which splits the row into 2 columns at 50%. So I need to add a class for each item on the li so it knows if it’s first or second item basically.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row"> <div class="col-md-12"> <ul ng-show="data.feed.length > 0"> <li id="item-{{ item.id }}" ng-repeat="item in data.feed | orderBy:'item.date':'reverse'" class="col-md-6"> <div blog-feed-item></div> </li> </ul> </div> </div> |
So then I found Angular provides such a directive already! It’s called ngClassOdd. So I added thes attributes to my list items and hey presto!
|
1 2 3 |
<... ng-class-odd="'first'" ng-class-even="'last'" ..> |
If we inspect it, we can see it’s adding the correct class to our DOM elements.
And with the styles (I’m using LESS) I get my gap!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
&.first { .blog-feed-item { margin-right: 5px; } } &.last { .blog-feed-item { margin-left: 5px; } } |
