Create New Rows For Nested Objects

I have found that ng-repeat-start and ng-repeat-end are available for this but they don't seem to be working. I have this structure: Events Array: Object, Object, Object. Each Eve

Solution 1:

You need to structure things a bit differently for this to work, but in so doing you'll find you don't need ng-repeat-start and ng-repeat-end. Instead put the ng-repeat on the <tbody> tag and then your nested ng-repeat on the second <tr> tag. Like so:

<tbodyng-repeat="value in Events"><tr><td>{{value.startTime}}</td><td>{{value.endTime}}</td><td>{{value.User}}</td></tr><trng-repeat="comments in value.Comments"><td>{{comments.id}}</td><tdcolspan="2">{{comments.comment}}</td></tr></tbody>

Solution 2:

You can also try this.

angular
  .module('app', [])
  .controller('MainCtrl', function($scope) {
    // generating sample data
    $scope.Events = [...newArray(10)]
      .map(() => {
        const date = Date.now();
        return {
          startTime: `Start time: ${date}`,
          endTime: `End time: ${date + 500}`,
          User: `User: ${date}`,
          Comments: [...newArray(2)]
            .map(() => {
              return {
                id: `Comment id: ${date}`,
                comment: `Comment: ${date} bla bla`
              };
            })
        };
      });
  });

table {
  border: 1px solid;
  border-collapse: collapse;
}

td {
  border: 1px solid;
}

tr:nth-child(3n+1) td {
  background: blue;
  color: white;
}

<scriptsrc="//code.angularjs.org/1.6.2/angular.js"></script><divng-app="app"ng-controller="MainCtrl"><table><tbody><trng-repeat-start="value in Events"><td>{{value.startTime}}</td><td>{{value.endTime}}</td><td>{{value.User}}</td></tr><trng-repeat-endng-repeat="comment in value.Comments"><td>{{comment.id}}</td><tdcolspan="2">{{comment.comment}}</td></tr></tbody></table></div>

Solution 3:

AngularJS documentation helped...

"The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed."

<tbody><trng-repeat-start="value in Events"><td>{{value.startTime}}</td><td>{{value.endTime}}</td><td>{{value.User}}</td></tr><trng-repeat="comments in value.Comments"><td>{{comments.id}}</td><td>{{comments.comment}}</td></tr><trng-repeat-end></tr></tbody>

Working Fiddle: http://jsfiddle.net/fqfh4cv6/