Nested ng-repeat in tr

Viewed 1943

I am new to AngularJS and i trouble to nested loop in tr.

Here is my Array :

Array
(
    [1] => Array
    (
        [0] => Array
            (
                [detail-1] => 1
                [detail-2] => 2
            )

        [1] => Array
            (
                [detail-3] => 3
                [detail-4] => 4
            )

    )

    [2] => Array
    (
        .....
    )
)

Wanted output in AngularJS.

<tr>
    <td>1</td>
</tr>
<tr>
    <td>detail-1</td>
    <td>detail-2</td>
</tr>
<tr>
    <td>detail-3</td>
    <td>detail-4</td>
</tr>
...........

So, how to fix this logically ?

Thanks in advance.

2 Answers

You could use a special repeat start and end markers, ng-repeat-start and ng-repeat-end to define range of DOM elements for topmost elements in the array:

angular
.module('demo', [])
.controller('DemoCtrl', function($scope) {
  $scope.nestedArray = [
      ['foo', 'bar'], 
      ['baz']
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DemoCtrl">
    <table>
      <tbody>
        <tr ng-repeat-start="item in nestedArray">
          <td>
            {{$index}}
          </td>
        </tr>
        <tr ng-repeat-end>
          <td ng-repeat="subitem in item">
            {{subitem}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Source

I have created JSON object like your array.

        $scope.myArray = [
            {
                name: 'Array 1',
                myArray: [
                    {name: '1'},
                    {name: '2'}
                ]
            }, {
                name: 'Array 2',
                myArray: [
                    {name: '3'},
                    {name: '4'}
                ]
            }
        ];

In Your HTML Code create table like below

<table class="table table-bordered">
    <tr ng-repeat="row in myArray">
        <td ng-repeat="childrow in row.myArray">
            <span data-ng-bind="childrow.name"></span>
        </td>
    </tr>
</table>

Output looks like below

enter image description here

Related