ng-repeat с вложенными объектами json

Question

Я пытаюсь создать вложенный ng-repeat, который заполняет имена контактов в кнопки из объектов JSON. Кажется, я не могу найти правильный способ заполнения информации. Может кто-нибудь объяснить, что случилось с моим ng-repeat?

http://plnkr.co/edit/B3g075?p=preview

<!-- Contacts List Section --> 
<div class="col-md-3 contact-list"> 
    <div class="list-group"> 
    <a href="javascript:void(0);" ng-repeat="contact in groups.contacts" class="list-group-item" ng-click="selectContact(contact)">{{group.firstName}} {{group.lastName}} 
     <span ng-click="deleteContact()" class="onHover pull-right"><i class="fa fa-times"></i></span> 
    </a> 
    </div> 
    <button ng-click="isCreatingNewContact = true" class="btn btn-default"><i class="fa fa-plus"></i> New Contact</button> 
</div> 

$scope.groups имеет следующую структуру (укороченный для краткости):

$scope.groups = [ 
    { 
    name: "Personal", 
    contacts: [ 
     { 
     "firstName": "Personal First Name", 
     "lastName": "last name", 
     // ... 
     }, 
     { /* another contact */ }, 
    ] 
    }, 
    { 
    name: "Family", 
    contacts: [ 
    // ...  
    ] 
    }, 

]; 

Благодарности

Answer 1

Обратите внимание, как здесь:

<div class="col-md-3 group-list"> 
    <!-- Groups Section --> 
    <h4>Contact Groups</h4> 
    <div class="list-group"> 
    <a href="javascript:void(0);" ng-model="all" class="list-group-item">All Contacts</a> 
    <a href="javascript:void(0);" ng-repeat="group in groups" class="list-group-item">{{group.name}} 
     <span ng-click="deleteGroup()" class="onHover pull-right"><i class="fa fa-times"></i></span> 
    </a> 
    </div> 
    <div class="col-bottom"> 
    <button class="btn btn-default"><i class="fa fa-plus"></i> New Group</button> 
    </div> 
</div> 

У вас есть директива ng-repeat="group in groups", итерация по группам. Группа вы получаете во время цикла по группам активно только в суб-объема <a> тега, который вы звоните директиву в.

Вы, кажется, хотят получить все contact объектов каждого объекта в groups. Вам придется снова итерации через список groups, и в рамках этой итерации итерации через объекты в групповых контактах. Так что-то вроде:

<!-- Contacts List Section --> 
<div class="col-md-3 contact-list"> 
    <div class="list-group"> 
    <div ng-repeat="group in groups"> 
     <a href="javascript:void(0);" ng-repeat="contact in group.contacts" class="list-group-item" ng-click="selectContact(contact)">{{contact.firstName}} {{contact.lastName}} 
     <span ng-click="deleteContact()" class="onHover pull-right"><i class="fa fa-times"></i></span> 
     </a> 
    </div> 
    </div> 
    <button ng-click="isCreatingNewContact = true" class="btn btn-default"><i class="fa fa-plus"></i> New Contact</button> 
</div> 

Plunker: http://plnkr.co/edit/lqNd5yDC2QlrX0M9TjrP