KingKongFrog KingKongFrog - 3 months ago 11
AngularJS Question

How do i display ng-repeat nested values

I have the following object. How can I only display the rows with the nested values?

$scope.mainObj = [{
name: 'a', items : [1,2,3],
name: 'b', items : [4,5,6],
}]

<table>
<tr ng-repeat="obj in mainObj">
<td></td>
</tr>
</table>


I want my output to be:

<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>

Answer

You could repeat tbody of table which is valid HTML. Assuming items can have entities.

HTML

<table>
  <tbody ng-repeat="obj in mainObj">
     <tr ng-repeat="item in obj.items">
        <td>{{item }}</td>
      </tr>
  </tbody>
</table>

Update

Correct your object structure as well as @csschapker suggested in comment.

$scope.mainObj = [{name: 'a', items:[1, 2, 3]}, {name: 'b', items: [4, 5, 6]}]