Style specific list items in ng-repeat

1

Hi I have a grid of blocks and pictures which I have populated in an ion-slide like so

<ion-slide> 
	<ion-content style="top:0;background-color:#ffffff;" scroll="true">
<!-- start of grid -->
	<ul>
	<li ng-repeat="grid in grids">
	<div class="image responsive" grid-image="{{grid.src}}" ng-click="openGridModal{{grid.id}}()"></div>
	<div class="details responsive" >{{grid.details}}</div>
	</li>
	</ul>
	</ion-content>
</ion-slide>

I currently have this, and I want to style so that every other row for text has a white background. so row two should have white background and then row 4 and so forth. I can’t figure out had to use ng-class to do this. I know this is more of a angular question, however I tried using .details:nth-child(4n), .details:nth-child(4n+1) , but it was not working and I’m not sure if this is because of conflict with ionic.

2

Do you mind posting a codepen? That way I can mess around with it

3

sure! thanks so much for your help! here’s the codepen

4

I guess while you are messing with it lol do you know how I would program it to have each box clickable and if clicked a modal with the same corresponding image and text appears. I made them all clickable to show what would be in the modal, but I wanted to automate this information for each one.

5

So I haven’t found done the modal portion yet, but here’s how you would do the css selection.

Its actually one that took some thinking.

.gridRepeats:nth-child(4n+1), .gridRepeats:nth-child(4n+2)  {
    .details{
      background-color: #9CD8D8;
}
}
6

Thank you so much! I’ll be on look out for the modal portion. You guys are the best! I also, tried using the vertical align: middle property for the .detail text but I can’t seem to get that to work. Can you think of way I can vertically center the text in the box? I don’t think I can use absolute positions in ionic.

by the way for anyone else who may use similar feature as this, I had to change the css to read like so:

.gridRepeats:nth-child(4n+1) .details, .gridRepeats:nth-child(4n+2) .details {
background-color: #9CD8D8;
}

for it the CSS to compile correctly. thanks again Mike!

7

Got the modal working! Although I can’t take credit for it, @Calendee was able to help out and put things together.

Take a look at the controller and see how he’s storing the selected item in an empty object, then passing it in on the modal open event. Pretty awesome!

Hope this helps :smile: