对象内对象内对象的嵌套 ng-repeat [英] nested ng-repeat for object within an object within an object

问题描述

我想使用 angular-js ng-repeat 来实现上面的图像.我的第三列有问题.

<table class="table table-striped table-condensed table-hover table-bordered table-overflow"单元格填充=4"细胞间距=4"对齐=中心"><thead nice-thead bind-not-sort-by="showMainCategory.notSortBy"></thead><tr ng-repeat="tcs in rows"><td>{{tcs.trackName}}</td><td><表格对齐=左"><tr ng-repeat="tcs.category 中的类别"><td>{{category.categoryName}}</td><td><表格>//这个应该在3号<td>父表<tr ng-repeat="skill in category.skill"><td>{{skill.skillName}}</td></tr></tbody></td></tr></tbody></td><td align="center"><a ui-sref="mainCategoryDe​​tails({mainCatId: mainCategory.mainCat_id})" class="glyphicon glyphicon-eye-open"></a></td></tr><tr><td ng-if="(!rows.length)" colspan="4" class="text-center">未找到结果.</td></tr></tbody><div 美味分页 bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>

这是我迄今为止尝试过的，输出不是我想要的，如示例图像所示.问题是如何输出父表的第三个技能中的最后一个数据.

解决方案

找到了一个答案，不太好，因为它不断重复 tbody 但它仍然可以

<div 美味表绑定资源回调=showTCS.loadAllTCS"绑定初始化=showTCS.init"绑定过滤器=showTCS.listParams"bind-reload="showTCS.reloadCallback"><table class="table table-striped table-condensed table-hover table-bordered table-overflow"单元格填充=4"细胞间距=4"对齐=中心"><thead nice-thead bind-not-sort-by="showTCS.notSortBy"></thead><tbody ng-repeat="tcs in rows"><tr ng-repeat="tcs.category 中的类别"><td class="text-center" style="vertical-align:middle;">{{tcs.trackName}}</td><td class="text-center" style="vertical-align:middle;">{{category.categoryName}}</td><td><ul class="list-unstyled" ><li ng-repeat="skill in category.skill">{{skill.skillName}}</li></td><td align="center"><a ui-sref="mainCategoryDe​​tails({mainCatId: mainCategory.mainCat_id})" class="glyphicon glyphicon-eye-open"></a><a ui-sref="editMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-edit"></a><a ui-sref="deleteMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-minus-sign"></a></td></tr><tr><td ng-if="(!rows.length)" colspan="4" class="text-center">未找到结果.</td></tr></tbody><div 美味分页 bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>

I want to achieve the above image using angular-js ng-repeat. i got a problem for the third column.

<div tasty-table
     bind-resource-callback="showTCS.loadAllTCS"
     bind-init="showTCS.init"
     bind-filters="showTCS.listParams"
     bind-reload="showTCS.reloadCallback">
    <table class="table table-striped table-condensed table-hover table-bordered table-overflow"
           cellpadding="4"
           cellspacing="4"
           align="center">
        <thead tasty-thead bind-not-sort-by="showMainCategory.notSortBy"></thead>
        <tbody>
            <tr ng-repeat="tcs in rows">
                <td>{{tcs.trackName}}</td>
                <td>
                    <table align="left">
                        <tbody>
                            <tr ng-repeat="category in tcs.category">
                                <td>{{category.categoryName}}</td>
                                <td>
                                    <table> //this one should be on the 3rd <td> of parent table
                                        <tbody>
                                            <tr ng-repeat="skill in category.skill">
                                                <td>{{skill.skillName}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td align="center">
                    <a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
                </td>
            </tr>
            <tr>
                <td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
            </tr>
        </tbody>
    </table>
    <div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>

This is what i have tried so far and the output is not what i want as shown in the sample image. The problem is how to output the last data which is skills in the third of the parent table.

解决方案

Found an answer, not quite good since it keeps repeating the tbody but its still ok

<div class="row-fluid" style="padding-top: 2%">
<div tasty-table
     bind-resource-callback="showTCS.loadAllTCS"
     bind-init="showTCS.init"
     bind-filters="showTCS.listParams"
     bind-reload="showTCS.reloadCallback">
    <table class="table table-striped table-condensed table-hover table-bordered table-overflow"
           cellpadding="4"
           cellspacing="4"
           align="center">
        <thead tasty-thead bind-not-sort-by="showTCS.notSortBy"></thead>
        <tbody ng-repeat="tcs in rows">
            <tr ng-repeat="category in tcs.category">
                <td class="text-center" style="vertical-align:middle;">{{tcs.trackName}}</td>
                <td class="text-center" style="vertical-align:middle;">{{category.categoryName}}</td>
                <td>
                    <ul class="list-unstyled" >
                        <li ng-repeat="skill in category.skill">{{skill.skillName}}</li>
                    </ul>
                </td>
                <td align="center">
                    <a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
                    <a ui-sref="editMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-edit"></a>
                    <a ui-sref="deleteMainCategory( {mainCatId:  mainCategory.mainCat_id} )" class="glyphicon glyphicon-minus-sign"></a>
                </td>
            </tr>
            <tr>
                <td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
            </tr>
        </tbody>
    </table>
    <div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>

这篇关于对象内对象内对象的嵌套 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！