为嵌套对象创建新行

Question

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 Event Object has properties: Start Time, End Time, User and Comments.

(Start Time, End Time and User has a string value while Comments is another array which contains Objects.)

Comments Array: Object, Object, Object.

Within the Comments Array each object has these properties: id and comment.

What I need to do is display every Event Object's Start Time, End Time, and User in a row. When I come across a Comment Array in the Event Object that has multiple Comment Objects, I want to display every id and comment in a NEW row.

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

Any help would be great! I'm fairly new to JavaScript so any examples would be nice.

Answer 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:

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

Answer 2

You can also try this.

 angular .module('app', []) .controller('MainCtrl', function($scope) { // generating sample data $scope.Events = [...new Array(10)] .map(() => { const date = Date.now(); return { startTime: `Start time: ${date}`, endTime: `End time: ${date + 500}`, User: `User: ${date}`, Comments: [...new Array(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; } 

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

Answer 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>
      <tr ng-repeat-start="value in Events">
           <td>{{value.startTime}}</td>
           <td>{{value.endTime}}</td>
           <td>{{value.User}}</td>
      </tr>
      <tr ng-repeat="comments in value.Comments">
            <td>{{comments.id}}</td>
            <td>{{comments.comment}}</td>
      </tr>
     <tr ng-repeat-end>
     </tr>
 </tbody>

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