在页面上显示数组

Show array on page

本文关键字：显示 数组      更新时间：2023-09-26

我有数组，其中每个对象都有包含带数组的对象的字段，例如：

var objects = [{
       'id':'1',
       'name': 'Joe',
       'last': 'Doe',
       'additionalField': {
           "a":[1,2,3],
           'b':[4,5,6],
           'c':[7,8,9],
           'd':[7,8,9],
       }, {...}, ...
 }]

如何在模板中表示additionalField？现在我转置数组的矩阵，并显示如下：

<tr ng-repeat="field in transposed">
    <td ng-repeat="element in field">
        <a ng-click="someAction(elment.name, elment.value)">{{element.value}}</a>
    </td>
</tr>

当我转置矩阵时，我会构建像这样的对象

var transposed = [
   [{'name': 'a', 'value': '1'},
    {'name': 'b', 'value': '4'},
    {'name': 'c', 'value': '7'}],
   [{'name': 'a', 'value': '2'},
    {'name': 'b', 'value': '5'},
    {'name': 'c', 'value': '8'}],
]

但这似乎太复杂了。你知道我怎样才能做得简单吗？我的意思是，我能在不换位的情况下做到这一点吗？用于获取类似于的表格

1 4 7 7
2 5 8 8
3 6 9 9

如果您的对象数组像：

$scope.objects= [{
       'id':'1',
       'name': 'Joe',
       'last': 'Doe',
       'additionalField': {
           "a":[1,2,3],
           'b':[4,5,6],
           'c':[7,8,9],
           'd':[7,8,9],
       }
 }];

并希望显示为：

1 4 7 7
2 5 8 8
3 6 9 9

然后可以尝试类似：

<tr ng-repeat="data in objects">
    <td ng-repeat="(key, value) in data.additionalField">
        <p ng-repeat="item in value">{{item}}</p>
    </td>
</tr>

Plunker演示

您可以这样转置矩阵：

var transposed = [
   [{'a': '1'},
    {'b': '4'},
    {'c': '7'}],
   [{'a': '2'},
    {'b': '5'},
    {'c': '8'}]
]

并在页面上显示如下：

<tr ng-repeat="field in transposed">
    <td ng-repeat="value in field">
        <a ng-click="someAction($index, value)">{{value}}</a>
    </td>
</tr>
相关文章：