Question

我试图创建一个嵌套的ng-repeat，它将联系人名称填充到JSON对象的按钮中。我似乎无法找到填充信息的正确方法。有人可以解释我的ng-repeat错误吗？

    <!-- 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

使用嵌套的json对象进行ng-repeat

1 个答案: