Question

我正在构建three不同的表，如下所示。

其中有很多重复的代码。

每个表中唯一不同的是studentPermissions[]数组，其中包含每个学生的三个对象。因此，在每个表格下，我只是为每个学生更改它，如studentPermissions[0], studentPermissions[1] and studentPermissions[2].

有没有更好的我可以在较少的行中编写相同的代码？

<div class="module-container">
    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[0].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[0].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[1].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[1].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[2].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[2].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

我不确定问题标题所以请随时更新它以使其与问题内容更相关。感谢

另外，我必须在隔离表中显示每个客户的数据。这是要求

Answer 1

为什么不使用另一个ng-repeat？

<div class="module-container">
    <div ng-repeat="studentPermission in studentPermissions">
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermission.SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermission.Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

如何有条件地在角度模板（html文件）中创建不同的部分

1 个答案: