CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Patrice Blanchardie
Patrice Blanchardie

Reputation: 1361

ngRepeat used as element inside a table doesn't work

I have a strange problem with AngularJS 1.6.0 (same with older versions) and the ngRepeat directive when it's used as an element nested in a table.

Simply put <ng-repeat> in a <table>, then put a <tr> inside: it doesn't work. But if you put the <ng-repeat> outside of a <table>, eg. with a <div> inside, it works perfectly.

When inspecting the rendered HTML in our buggy case, we can see the iterations of ng-repeat, but they go out of the table, thus breaking the DOM and making the lines disappear:

 <p>When placed inside a table, with tr inside, it doesn't work:</p>
  <!-- ngRepeat: person in people --><ng-repeat ng-repeat="person in people" class="ng-scope">
      </ng-repeat><!-- end ngRepeat: person in people --><ng-repeat ng-repeat="person in people" class="ng-scope">
      </ng-repeat><!-- end ngRepeat: person in people --><ng-repeat ng-repeat="person in people" class="ng-scope">
      </ng-repeat><!-- end ngRepeat: person in people -->
<table>
  <tbody>
    <tr>
      <td class="ng-binding"></td>
    </tr>
  </tbody>
</table>

Tested with latest Chrome and Firefox.

angular.module('myApp', [])

.controller('MyCtrl', function($scope) {
  $scope.people = [{
    name: 'John',
    age: 20
  }, {
    name: 'Peter',
    age: 22
  }, {
    name: 'Jane',
    age: 19
  }];
});
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
  <meta charset=utf-8 />
  <title>ngRepeat</title>
</head>

<body>

  <div ng-controller="MyCtrl">
    <p>Hello ng-repeat!</p>

    <p>With div inside, ng-repeat element works:</p>
    <ng-repeat ng-repeat="person in people">
      <div>
        <td>{{person.name}}</td>
      </div>
    </ng-repeat>

    <p>When ng-repeat element is placed inside a table, with tr inside, <strong>it doesn't work</strong>:</p>
    <table>

      <ng-repeat ng-repeat="person in people">
        <tr>
          <td>{{person.name}}</td>
        </tr>
      </ng-repeat>

    </table>
    
    <p>But, when ng-repeat is used as an attribute on tr, it works!</p>
    <table>

      <tr ng-repeat="person in people">
          <td>{{person.name}}</td>
      </tr>

    </table>
    
    

  </div>
</body>

</html>

Did I miss something?

Upvotes: 1

Views: 1607

Answers (1)

Sankar
Sankar

Reputation: 7117

ng-repeat is not an valid Element into the table tag, Browsers won't complain about unrecognized attributes.

tr,tbody,thead are the valid elements into the table tag.

Here I just change the ng-repeat in the table to tbody. So then it works.

angular.module('myApp', [])

.controller('MyCtrl', function($scope) {
  $scope.people = [{
    name: 'John',
    age: 20
  }, {
    name: 'Peter',
    age: 22
  }, {
    name: 'Jane',
    age: 19
  }];
});
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
  <meta charset=utf-8 />
  <title>ngRepeat</title>
</head>

<body>

  <div ng-controller="MyCtrl">
    <p>Hello ng-repeat!</p>

    <p>With div inside, ng-repeat element works:</p>
    <ng-repeat ng-repeat="person in people">
      <div>
        <td>{{person.name}}</td>
      </div>
    </ng-repeat>

    <p>When ng-repeat element is placed inside a table, with tr inside, <strong>it doesn't work</strong>:</p>
    <table>

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

    </table>
    
    <p>But, when ng-repeat is used as an attribute on tr, it works!</p>
    <table>

      <tr ng-repeat="person in people">
          <td>{{person.name}}</td>
      </tr>

    </table>
    
    

  </div>
</body>

</html>

Upvotes: 4

Related Questions