Question

我需要在ng-repeat内使用嵌套的ng-repeat，因为我有一个包含对象和子对象的数组。我的桌子需要桌子里面有桌子这是JSON

{  
   "1009":{  
      "id":1009,
      "serial_number":"1009-U",
      "campaigns":{  
         "52":{  
            "id":52,
            "name":"testSLOV"
         },
         "47":{  
            "id":47,
            "name":"IMA PODJELE"
         },
         "44":{  
            "id":44,
            "name":"TEST DUPLO"
         },
         "30":{  
            "id":30,
            "name":"ag3"
         },
         "26":{  
            "id":26,
            "name":"fdgdfsg"
         }
      }
   },
   "1051":{  
      "id":1051,
      "serial_number":"1051-U",
      "campaigns":{  
         "52":{  
            "id":52,
            "name":"testSLOV"
         },
         "43":{  
            "id":43,
            "name":"test weather"
         },
         "39":{  
            "id":39,
            "name":"default2"
         },
         "37":{  
            "id":37,
            "name":"ag5"
         }
      }
   },
   "1500":{  
      "id":1500,
      "serial_number":"1500-U",
      "campaigns":{  
         "51":{  
            "id":51,
            "name":"ag10"
         }
      }
   }
}

我需要将父ng-repet设置为，并将子ng-repeat设置为这是示例

<table>
   <thead>
       <tr>
          <th>Id</th>
       </tr>
   </thead>
   <tbody ng-repeat="item in items | filter:searcht">
       <tr>
          <td>{{item}}</td>
       <tr>
       <tr>
          <td></td>
          <td colspan="3" style="cursor: pointer;">
              <table style="width:100%;">
                 <tbody>
                     <tr ng-repeat="campaign in item.campaigns | filter:search">
                         <td width="250px"><a ui-sref="campaign({campaignId: {{campaign.id}}})">{{campaign.name}}</a></td>

                     </tr>
                 </tbody>
              </table>
          </td>
       </tr>
   </tbody>

 </table>
 <form class="form-inline">
    <div class="form-group">
        <label >Search</label>
        <input type="text" ng-model="search" class="form-control" 
         placeholder="Search">
    </div>
  </form>

当我尝试使用搜索过滤器在表中搜索时出现错误

错误：[filter：notarray]

如果我将finst ng-repeat移到过滤器上工作，但是在这种情况下，我无法让新的子ng-repeat上班

<tr ng-repeat="item in items">
   <td>{{item}}</td>
</tr>
<tr ng-repeat="campaign in item.campaigns">
   <td>{{campaign .name}}</td>
</tr>

Answer 1

问题在您的json结构中。 ng-repeat以Array实例，但您有哈希Object实例。

{"1009": {...}, "1051": {...} ...}

到

[{"1009": {...}}, {"1051": {...}}, ...]

或（用于适当的结构）

[{"id": "1009", ...}, {"id": "1051", ...}]

编辑

转换过程：

const json = {"1009": {...}, "1051": {...}}
const arr = Object.keys(json).reduce((temp, key) => {
    temp.push({id: key, ...json[key]})
    return temp;
}, [])

Answer 2

好吧，我找到了一个简单的解决方案，添加toArray:false

ng-repeat="item in items | toArray:false"

，现在一切正常。向所有人致谢

嵌套的ng-repeat-搜索不起作用

2 个答案:

编辑