Angularjs 无法在对象中显示数组_Angularjs

Angularjs 无法在对象中显示数组

angularjs

Angularjs 无法在对象中显示数组,angularjs,Angularjs,我有一个应用程序，调用我的API返回一个对象，该对象也包含一个对象数组基本上： { "_id": "587bc430e64e9f28a6894dd4", "lastname": "Lane", "firstname": "Panny", "__v": 0, "contacts": [ { "name": "rick jevers", "age": 25,

我有一个应用程序，调用我的API返回一个对象，该对象也包含一个对象数组

基本上：

   {
      "_id": "587bc430e64e9f28a6894dd4",
      "lastname": "Lane",
      "firstname": "Panny",
      "__v": 0,
      "contacts": [
         {
            "name": "rick jevers",
            "age": 25,
            "_id": "587bc430e64e9f28a6894dd5"
         }
      ]
   },

我认为在数组中显示对象的方法是使用另一个ng repeat，如下所示：

<div class="col-md-12" style="clear:both; padding:30px;">
      <ul style="list-style: none">
      <li ng-repeat="item in sample.post">
        <strong>
          {{item.firstname}} {{item.lastname}}
        </strong>  
        <ul style="list-style: none;">
          <li ng-repeat="contact in sample.post.contacts">
            {{contact.name}}
          </li>
        </ul>
      </li>
    </ul>
</div>





{{item.firstname}{{item.lastname}}



{{contact.name}

但这对我不起作用

我遗漏了什么？

对于第二个

ng repeat

，您已经在另一个

ng repeat

中，这意味着您已经拥有正在重复的当前对象（项目），例如数组中的第一个对象，因此，直接在第二个

ng repeat

中使用它，如下所示：

<ul style="list-style: none;">
      <li ng-repeat="contact in item.contacts">
        {{contact.name}}
      </li>
    </ul>





{{item.firstname}{{item.lastname}}



{{contact.name}

对于第二个

ng repeat

，您已经在另一个

ng repeat

中，这意味着您已经拥有正在重复的当前对象（项目），例如数组中的第一个对象，因此，直接在第二个

ng repeat

中使用它，如下所示：

<ul style="list-style: none;">
      <li ng-repeat="contact in item.contacts">
        {{contact.name}}
      </li>
    </ul>





{{item.firstname}{{item.lastname}}



{{contact.name}

要解决这个问题，你需要弄清楚为什么它不适合你。

ng repeat

迭代一个数组，对于数组中的每个项目，它将在DOM中重复该元素及其子元素

当您编写第一个

ng repeat

时，您正在迭代包含所有人员详细信息的主数组。在下一步中，每个这样的对象中都有

联系人

数组，也就是说，在这里，您希望在同一对象的

联系人

中迭代

听取您的意见：

[
{
      "_id": "587bc430e64e9f28a6894dd4",//person 1
      "lastname": "Lane",
      "firstname": "Panny",
      "__v": 0,
      "contacts": [
         {
            "name": "rick jevers",
            "age": 25,
            "_id": "587bc430e64e9f28a6894dd5"
         }
      ]
   }, 
{
//person 2
}, {
//person 3
}

因此，您的第一次

ng repeat

将在该阵列上。接下来是

联系人

，它位于同一对象中，因此您需要对

联系人

执行

ng repeat

，但在同一对象中

<div class="col-md-12" style="clear:both; padding:30px;">
  <ul style="list-style: none">
  <li ng-repeat="item in sample.post">
    <strong>
      {{item.firstname}} {{item.lastname}}
    </strong>  
    <ul style="list-style: none;">
      <li ng-repeat="contact in item.contacts"><!--iterate over item's contact-->
        {{contact.name}}
      </li>
    </ul>
  </li>
</ul>





{{item.firstname}{{item.lastname}}



{{contact.name}