如何在 html 的表中运行 ng-repeat 循环？答案

【问题标题】：How do I run a ng-repeat loop inside a table in html?如何在 html 的表中运行 ng-repeat 循环？
【发布时间】：2019-07-09 05:26:33
【问题描述】：

                <thead>
                    <tr>

                        <th ng-click="sortData('firstname')">
                            Firstname <div ng-class="getSortClass('firstname')"></div>
                        </th>

                        <th ng-click="sortData('lastname')">
                            Lastname <div ng-class="getSortClass('lastname')"></div>
                        </th>


                        <th ng-click="sortData('email')">
                            Email <div ng-class="getSortClass('email')"></div>
                        </th>


                        <th ng-click="sortData('university')">
                            University <div ng-class="getSortClass('university')"></div>
                        </th>

                        <th ng-click="sortData('githublink')">
                            Github Link <div ng-class="getSortClass('githublink')"></div>
                        </th>

                        <th ng-click="sortData('bamboolink')">
                            Bamboo <div ng-class="getSortClass('bamboolink')"></div>
                        </th>

                        <th ng-click="sortData('backendnote')">
                            Backend <div ng-class="getSortClass('backendnote')"></div>
                        </th>

                        <th ng-click="sortData('frontend')">
                            Frontend <div ng-class="getSortClass('frontend')"></div>
                        </th>

                        <th ng-click="sortData('algorithms')">
                            Algorithms <div ng-class="getSortClass('algorithms')"></div>
                        </th>

                        <th ng-click="sortData('specialnote')">
                            Special notes <div ng-class="getSortClass('specialnote')"></div>
                        </th>

                        <th>
                            Extra column1
                        </th>

                        <th>
                            Extra column2
                        </th>

                        <th>
                            Extra column3
                        </th>

                        <th>
                            Delete
                        </th>

                        <th>
                            Edit
                        </th>

                    </tr>

                </thead>

我想用 ng-repeat 替换这些额外的第 1、2 和 3 列，因为列数最终会改变。当我在下面尝试这段代码时

                        <div ng-repeat="a in emps">
                            <th>
                                {{a.intervieweeExtra[$index].columnname}}
                            </th>
                        </div>

它什么也没打印。如何在 angularjs 1.x 中执行此操作？我是 html 和 angularjs 的新手。我还没有找到可行的解决方案，所以我在这里问这个。谢谢

【问题讨论】：

<th ng-repeat="a in emps">{{a.intervieweeExtra[$index].columnname}}</th> 向我们展示emps 的样本和预期的 html 结果。

标签： html angularjs angularjs-ng-repeat single-page-application

【解决方案1】：

<div> 元素没有任何理由。您应该将ng-repeat 直接放在<th> 元素上，即：

<table>
    <thead>
        <tr>
            <!-- Permanent columns -->
            <th></th>
            <th></th>

            <!-- Variable columns -->
            <th ng-repeat="a in emps">{{a.intervieweeExtra[$index].columnname}}</th>

            <!-- Permanent columns -->
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <!-- Permanent columns -->
            <td></td>
            <td></td>

            <!-- Conditional columns -->
            <td ng-repeat="a in emps"></td>

            <!-- Permanent columns -->
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

在<tbody> 元素的表行中添加一个相同的ng-repeat，以确保表头和表体中的行包含相同数量的列。

我认为您也只是想引用{{a.intervieweeExtra.columnname}}，但不知道您的数据结构很难确定。

【讨论】：

【解决方案2】：

{{$index+1}} {{row.name}}
{{array.name}}

请将此用于 ng-repeat

【讨论】：

{{$index+1}} {{row.name}}