Question

我正在试图弄清楚如何动态显示带有JSON元素的表格，但格式很难用表格做。我正在使用AngularJs 1.6.4和Bootstrap，但我是Angular的新手。我的JSON： -

"foo": {
    "name": "foo",
    "displayName": "FOO SHOW",
    "environments": [
        {
            "id": "one",
            "name": "PROD",
            "url": "http://my-prod-url.com"
        },
        {
            "id": "two",
            "name": "QA",
            "url": "http://my-qa-url.com"
        },
        {
            "id": "three",
            "name": "DEV",
            "url": "http://my-dev-url.com"
        }
    ]
},
"bar": {
    "name": "bar",
    "displayName": "BAR SHOW",
    "environments": [
        {
            "id": "four", 
            "name": "PROD",
            "url": "https://my-prod2-url.com"
        },
        {
            "id": "five",
            "name": "QA",
            "url": "https://my-uat2-url.com"
        },
        {
            "id": "six",
            "name": "DEV",
            "url": "https://my-dev2-url.com"
        }
    ]
}

我想以一种动态显示所有内容的方式显示它，但是基于顶部的应用程序和表左侧的环境。例如： -

ENV | FOO | BAR

PROD| fooProdUrl| barProdUrl

QA  | fooQaUrl| barQaUrl

DEV | fooDevUrl| barDevUrl

我试过这个，但它不是动态的，它不按我想要的顺序显示： -

<table class="table">
    <thead>
        <tr>
            <th class="text-center">Environment</th>
            <th class="text-center" data-ng-repeat="list in applications">{{list.displayName}}</th>
        </tr>
    </thead>
    <tbody class="text-center">
        <tr data-ng-repeat="list in applications">
            <th class="text-center">
                {{list.environments[0].name}} and {{list.name}}
            </th>
            <td>
                {{list.environments[0].url}} and {{list.name}} and {{list.environments[0].name}} 
            </td>
            <td>
                {{list.environments[1].url}} and {{list.name}} and {{list.environments[1].name}}
            </td>
        </tr>
    </tbody>
</table>

这会以行显示，但不会以我想要的列显示。

我应该重新组织我的JSON对象吗？以不同的方式拆分它？我一直对此感到困惑。

谢谢！

自定义表格布局ng-repeat

0 个答案: