Question

我正在使用ng-repeat为以下对象生成表行

$scope.things = [{
    name: 'Bob',
    otherThings: [{
        foo: 'hello'
    },{
        foo: 'bye'
    }]
},{
    name: 'Sid',
    otherThings: [{
        foo: 'cake'
    },{
        foo: 'fish'
    }]
}];

我带的ng-repeat表达式是：

<tbody ng-repeat="thing in things">
    <tr ng-repeat="otherThing in thing.otherThings">
        <td>{{thing.name}}</td>
        <td>{{otherThing.foo}}</td>
    </tr>
</tbody>

这会生成多个tbody元素，我的对象中每个父项一个：

<tbody>
    <tr>
        <td>Bob</td>
        <td>hello</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bye</td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Sid</td>
        <td>cake</td>
    </tr>
    <tr>
        <td>Sid</td>
        <td>fish</td>
    </tr>
</tbody>

我想避免多个tbody元素，但我知道为了访问父项和子项，我必须嵌套ng-repeat。

我可以展平原始对象，以便为每个子项复制父信息，但是如果可能的话我想避免这种情况，并按原样使用数据结构。

ng-repeat是否有任何特殊用途，例如可以在一次ng-repeat上使用的多个表达式，以便在每次迭代中访问父项和子项？

由于

更新

我想避免多个tbody元素的原因是因为我有一个用于备用行着色的css选择器：

tbody tr:nth-child(odd){
    background-color: $theme-list-alt;
  }

如果每个父母只有一个子项目，他们都会变成相同的颜色，而我想要在整个过程中交替使用颜色。

更新2

我想知道使用ng-repeat-start和ng-repeat-end是否可以帮助我，所以我尝试了以下Plunkr

这并不能给每个孩子一排，例如：

Bob hello
Bob bye
Sid cake
Sid fish

我明白为什么，只是不确定如何实现这一点。

Answer 1

试试这个。

  <tbody>
   <tr ng-repeat="thing in things"> 
     <td>{{thing.name}}</td>
     <td ng-repeat="otherThing in thing.otherThings">{{otherThing.foo}}</td>
   </tr>
 </tbody>

在相同元素上嵌套ng-repeat而不展平原始数据源

1 个答案: