3

enter image description here

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.

Improve this question
5
  • 1
    Please post what you've tried. Commented Jan 9, 2017 at 10:27
  • 1
    @Alexandru-IonutMihai already posted my code Commented Jan 9, 2017 at 10:29
  • You can find your answer here. stackoverflow.com/a/18409175/5958860 Commented Jan 9, 2017 at 10:29
  • @SecretCoding, please post your json also. Commented Jan 9, 2017 at 10:30
  • @MaoStream the link you gave shows unordered list which is not the same from my problem. unordered list is much simplier to handle compared to table Commented Jan 9, 2017 at 10:31

1 Answer 1

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.