: last-child in ng-repeat not working

Question

I used angular ng-repeat to print the div several times. But the style seems a little wrong with the last child. I need to provide a specific style to the last child of the ng-repeat element. That's what I'm doing:

.link-tickets div:last-child{ float:left; } 

 <div class="medium-4 column no-pad-left link-tickets" ng-repeat="ticket_data in acct_details.tickets"> <p><a href="#details/{{acct_details.client_id}}/ticket/{{ticket_data.ticket_id}}"><strong class="bold-color">{{acct_details.client_name}}</strong></a> <br>{{available_stages[ticket_data.stage_id].stage_name}} <br>{{ticket_data.created_at | format | date}}</p> </div> 

So what am I doing wrong here?

Answer 1

You can also use the special variable $last (or $first ), which is available inside the ng-repeat .

$last is true when the current element is the last in the array. $first works the same, but for the first element :)

Then you can use it inside ng-class , like this

 <ul> <li ng-repeat="item in list" ng-class="{'last-item': $last}"> </ul> 

and then define the .last-item css class

Answer 2

Sorry, my question is wrong. I realized that myself.

 .medium-4.column.no-pad-left.link-tickets.ng-scope { float: left; } 

it fully works.