使用角度中的ng-repeat从二维数组构建表

Question

我想从具有此方案的数组构建一个表：

var items = [
    {
        name: 'xxx',
        configurations: [
            { 
                image: 'aaa.jpg'
            },
            { 
                image: 'bbb.jpg'
            },
            ...
        ]
    },
    {
        name: 'yyy',
        configurations: [
            { 
                image: 'ccc.jpg'
            },
            { 
                image: 'ddd.jpg'
            },
            ...
        ]
    },
    ...
]

我想要使用所有元素中的所有图像来实现一行（每个图像都嵌套在一个<td>中，例如：

<tr>
    <td>
        <img src="aaa.jpg">
    </td>
    <td>
        <img src="bbb.jpg">
    </td>
    <td>
        <img src="ccc.jpg">
    </td>
    <td>
        <img src="ddd.jpg">
    </td>
</tr>

我怎么能用角度来做？到目前为止我的代码看起来像这样：

<tr>
    <td ng-repeat-start="proposition in items">
        <img ng-src="{{::proposition.configurations[0].image}}" />
    </td>
    <td ng-repeat-end>
        <img ng-src="{{::proposition.configurations[1].image}}" />
    </td>
</tr>

但很明显configurations中proposition的一些{{1}}是动态的，所以如何迭代它，保持相同的html方案？

Answer 1

您必须运行两次ng-repeat，一次用于项，另一次用于配置。

修改

最简单的方法是展平您的阵列。 因此，您将拥有一个包含<image, name>

元组的长数组

你可以用map：

来做到这一点

该代码：

 $scope.items =  [
    {
        name: 'xxx',
        configurations: [
            { 
                image: 'yyy.jpg'
            },
            { 
                image: 'yyy2.jpg'
            }
        ]
    },
    {
        name: 'yyy',
        configurations: [
            { 
                image: 'zzz.jpg'
            },
            { 
                image: 'zzz2.jpg'
            }
        ]
    },
];

  $scope.items = $scope.items.map(function(item){
    return item.configurations.map(function(inner){
        return { name: item.name, image: inner.image};
    })
  })

  $scope.items = $scope.items.concat.apply([], $scope.items);

您有一个完整的工作示例here。