ng-show for a specific element within ng-repeat

Question

I can't seem to get my head around this little problem:

<ul ng-repeat="parent in parents">
  <li>Mother: <i>{{parent.mother}}</i></li>
  <li>Father: <i>{{parent.father}}</i></li>
  <a href="#" ng-click="showKids()">Show Kids</a>
  <ul ng-repeat="kid in parent.kids" ng-show="active">
    <li>{{kid.name}}</li>
  </ul>
</ul>

http://jsfiddle.net/twSFK/5/

When i click "Show Kids", i only want to show the kids of the parents where i clicked, but not the other. So i'd need some kind of index for the model i use in ng-show to target only a specific element.

Since $scope.parents comes from the backend-server and is loaded with ng-init, i don't know how i can access it to add an "active"-element before the controller writes the list.

Answer 1

You can set the iterator index of ng-repeat="parent in parents" and use it to play with two functions: showKids(index) will mark what parent listing should go as active whenever you click on a kids listing, and isShowing(index) in order to know what kids sublisting you should display with ng-show

I rewrote your code according to my ideas here http://jsfiddle.net/odiseo/twSFK/7/