Question

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

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

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

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

注释数组：对象，对象，对象。

在Comments Array中，每个对象都有以下属性：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>标记上，然后将嵌套ng-repeat放在第二个<tr>标记上。像这样：

<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

您也可以试试这个。

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文档帮助......

“ng-repeat-start指令与ng-repeat的作用相同，但会重复所有HTML代码（包括它定义的标记），包括结尾的HTML标记，其中放置了ng-repeat-end 。“

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

为嵌套对象创建新行

3 个答案: