Michał Poreda Michał Poreda - 4 months ago 32
Javascript Question

AngularJS ng-repeat in tbody not working

I have problem with using ng-repeat in tbody.
When i use that code:

<tbody>
<tr ng-repeat="group in groups">
<td>{{ group.name }}</td>
</tr>
</tbody>


I get this error:


TypeError: Cannot read property 'childNodes' of undefined


But having this code:

<div ng-repeat="group in groups">{{group.name}}</div>


Inside the same scope works perfect. I've found some answers to use ng-repeat on tbody, but i need this structure to use jquery datatables on this. Can anybody help me with this?

Answer

Try like this, its working

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.groups = [
        {name: 'Michał', users:  5, owners: 4},
        {name: 'Michał', users:  5, owners: 4},
        {name: 'Michał', users:  5, owners: 4},
        {name: 'Michał', users:  5, owners: 4}
    ];
});
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
    using div
  <div ng-repeat="group in groups">{{group.name}}</div>
  using table
   <table>
  <tbody>
  <thead>
                        <tr>
                            <th>name</th>
                            <th>user</th>
                            
                        </tr>
                    </thead>  
 <tr ng-repeat="group in groups">
      <td>{{ group.name }}</td>
       <td>{{ group.users }}</td>
   </tr>
  </tbody>
</table> 

  </body>

</html>