:last-child in ng-repeat not working

Question

I was using angular's ng-repeat to print a div multiple times. But the styling seem to get a little wrong with the last child. I need to provide specific styling to the last-child of the ng-repeat's element. Here is what I was 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 loop.

$last has value true when the current element is the last one 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 .last-item css class