user3561890 user3561890 - 18 days ago 7
AngularJS Question

ng-repeat with nested ng-repeat between parent data

I have an array of objects with a players array. I'd like to display the info in a table row, but with the nested array's values in the middle of the row. I get all the info except the last column. It comes up blank telling me it's an invalid key.

<table class="table table-condensed table-striped"ng-show="vm.registrations.length > 0">
<thead>
<td>Day</td>
<td>Field</td>
<td>Event</td>
<td colspan="4">Players</td>
<td>Status</td>
</thead>
<tbody>
<tr ng-repeat="event in vm.registrations" >
<td>{{event.day}}</td>
<td>{{event.field | uppercase }}</td>
<td>{{event.event}}</td>
<td colspan="4" ng-if="event.numplayers == 2">
<span ng-repeat="player in event.players">
<span>{{player.first}} {{player.last}}</span>
<span ng-show="$last">, </span>
</span>
</td>
<td>
<span class="label label-sucess" ng-if="{{event.active}} == true">ACTIVE</span>
<span class="label label-danger" ng-if="{{event.active}} == false">Canceled</span>
</td>
</tr>
</tbody>
</table>


Data should appear like (but the last column is blank, except the header):

Day Field Event Players Status
Sat MAIN Mens B Bob, John Active
Sun COED COED A Bob, Mary Canceled


This is what I get:

Day Field Event Players Status
Sat MAIN Mens B Bob, John
Sun COED COED A Bob, Mary


How do I get back to the parent ng-repeat to finish the display?

Answer

typo here

 <span ng-show"$last">

you forgot the equals

 <span ng-show="$last">

that's why you're not seeing the last element of your ng-repeat