2015-08-11 5 views
0

У меня есть список вложенных массивов, и я хотел бы получить другую таблицу строк для каждого unit.Различные строки для каждого блока

JSON:

[ 
    { 
     "id":1, 
     "units":[ 
     { 
      "id":1, 
      "name":"Test 1", 
     }, 
     { 
      "id":2, 
      "name":"Test 2" 
     } 
     ] 
    } 
] 

Так Test 1 и Test 2 должны быть в разных строках таблицы.

HTML:

<tr ng-repeat="user in users"> 
    <td><p ng-repeat="unit in user.units">{{unit.name}}</p></td> 
</tr> 

Приведенный выше код работает, но я получаю unit имена в одной строке.

Я пробовал:

<tr ng-repeat="unit in users.units"> 
    <td>{{unit.name}}</td> 
</tr> 

Но это не работает. Любая помощь будет оценена!

+0

Есть дополнительные [] открывающие скобки? –

+0

Да, это @KevinP. – user4756836

+0

Нет объекта под названием 'users.units', поэтому он не может найти ваши данные. Вот почему это не работает. – HankScorpio

ответ

2

Вот решение, которое не потребует каких-либо изменений в ваших данных, хотя это может быть не самое чистое решение. Другой вариант (который я не собираюсь писать) - это изменить ваши данные и свернуть данные до одного массива или объекта, содержащего все блоки.

Я собираюсь сделать предположение, что вы хотите, чтобы ваш DOM (включая <table>), чтобы идеально выглядеть следующим образом:

<table> 
    <tr> 
    <td><p>Test 1</p></td> 
    </tr> 
    <tr> 
    <td><p>Test 2</p></td> 
    </tr> 
</table> 

Проблема здесь в том, что нет ничего, что представляет «пользователей» часть этого первого ng-repeat (для этой структуры данных необходимы 2-n-повторы). Насколько я знаю, невозможно запустить ng-repeat, не создавая также элемент DOM (по крайней мере, временный), поэтому мы можем создать некоторый действительный html (<caption> s в этом случае) и иметь угловое исключение, используя одноразовая привязка ng-if.

<div ng-controller="MyCtrl"> 
    <table> 
     <!-- The ng-if here will remove the <caption> from the end result. It's just a placeholder for the users repeater. --> 
     <caption ng-repeat-start="user in users" ng-if="::false"></caption> 
     <tr ng-repeat="unit in user.units"> 
      <td><p>{{unit.name}}</p></td> 
     </tr> 
     <caption ng-repeat-end ng-if="::false"></caption> 
    </table> 
</div> 
Смежные вопросы