为嵌套对象创建新行

Question

我发现ng-repeat-start和ng-repeat-end可用于此，但它们似乎不工作。我有这样的结构：

事件数组：对象，对象，对象。

每个事件对象都有属性：开始时间，结束时间，用户和注释。

（开始时间，结束时间和用户有一个字符串值，而评论是另一个数组，它包含对象。）

评论阵列：对象，对象，对象。

在注释数组中每个对象都具有以下属性：id和comment。

我需要做的是在一行中显示每个事件对象的开始时间，结束时间和用户。当我在包含多个注释对象的事件对象中遇到注释数组时，我想在新行中显示每个ID和注释。

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

任何帮助将是伟大的！我相当新的JavaScript，所以任何例子都会很好。

Answer 1

你需要对结构做些改变才能工作，但这样做你会发现你不需要ng-repeat-start和ng-repeat-end。而是将ng-repeat放在<tbody>标记上，然后在第二个<tr>标记上嵌套ng-repeat。像这样：

<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

AngularJS文档帮助...

“的NG-重复启动指令的工作方式相同NG重复，但会重复所有的HTML代码（包括它的定义上的标签）直到并包括放置ng-repeat-end的结束HTML标记。“

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

工作小提琴：http://jsfiddle.net/fqfh4cv6/

Answer 3

你也可以试试这个。

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>