using ng-repeat within a nested loop to iterate through objects nested within other objects

https://i.sstatic.net/eoRHo.png

My goal is to replicate the image above using AngularJS ng-repeat. I am facing difficulty with 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>

I have attempted the code above, but it does not produce the desired output as shown in the sample image. The challenge lies in displaying the last data, which are the skills, in the third column of the parent table.

Answer №1

Discovering a solution, although not ideal as it repetitively includes the tbody, but still satisfactory

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problems with Ajax functionality

Excuse my rusty JavaScript skills but I'm attempting to use an AJAX call to a PHP file, pass it a plan type, and then determine if there are enough available slots for the plan. If so, return true; otherwise, false. Below is the Form in XHTML: <fo ...

What is the best way to organize an object that includes both numbers and strings?

Presently, I have an array shaped like this (for example): const items = [{ name: 'LFB 1Y GF'}, {name: 'LFB 3M GF'}, {name: 'LFB 2Y GF'}, {name: 'LFB 10Y GF'}, {name: 'LFB 5Y GF'}] The desired ordering of ...

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

TS roomList = [{ name: 'Room2' }] HTML <div class="Layout-body"> <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="Room1" [ngTemplateOutletContext]="{ data: dt, i: i }&qu ...

Scrolling text box utilizing Jquery

Currently, I am utilizing a scrolling box that functions well * view here * under normal circumstances. However, when there is an extensive amount of content below it, such as: <article class="content"> ...

Reverting Vue Draggable Components to Their Original Position Upon Dropping Them

In my Vue 3 project, I'm implementing vuedraggable to enable element reordering within an expansion panel. However, I've encountered an issue where the dragged elements revert to their original positions upon release. This behavior suggests that ...

Guide on updating and storing changes in a JSON file named 'file.json' using jQuery or JavaScript

I'm working with a JSON file and attempting to make updates using jQuery. However, I'm encountering an issue where I can't seem to save the update once the script has finished running. Is there a way to save the update without relying on se ...

Transitioning from the Play mode to the Pause mode upon pressing the Set button

Is there a way to make the button switch from play to pause once the 'Set' button is clicked? Clicking on 'Set' should change the SVG to display the pause button icon. Snippet of Code: https://jsfiddle.net/192h0w85/195/ (function ...

When implementing variables from input boxes, my SQL query fails to populate any data in the database table

I have been using phpMyAdmin to store test data. As I try to insert data from a form, I encounter an issue where no data gets inserted when using variables in the SQL query. Being new to coding, I am struggling to find a solution to this problem. Additiona ...

Error Encountered During Global Installation of NodeJS

I'm attempting to create a Node module that, when installed globally with the -g flag, can be run with a single command from the terminal. Although the tutorials I've followed suggest it should be straightforward, I seem to be missing something. ...

Utilizing a Buefy element without Vue.js integration

Is there a way to generate a Buefy notification without utilizing a Vue component? Specifically, I'm attempting to implement a Buefy notification within the axios interceptor below: import axios from "axios"; import { Notification } from "buefy/dist/ ...

Is there a way to access a component based on the parameter in the Vue router?

I am working on a Vue component called Portfolio.vue, which contains a child component called Category.vue. I am able to navigate to the Category.vue component using <router-link :to = "{ name: 'category', params: { id: id }}"> wh ...

Is there a way to optimize app speed in Angular2 by importing CommonModule and RouterModule in a centralized location?

I find myself constantly importing these two modules in almost every component: import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; Is there a way to import them only once in the global app. ...

Easily adding multiple field data with the same field name into a database can be achieved using Mongoose and Node.js (specifically Express

I am new to using nodejs and exploring the creation of a project focused on generating invoices. My goal is to store product information in mongodb utilizing mongoose and express, but I'm unsure of how to proceed. Below is a snippet of my HTML code.. ...

Loop through a collection of objects in Angular 2

Upon subscribing to an array of objects received from a JSON file in the service file, I encountered an error while trying to iterate through it. The error message I received was: EXCEPTION: Error in app/dashboard/features/fleet/fleetControlPanel/fleetCon ...

The option list in AngularJS is cleared when an option is selected

In my current project, I am developing a django-tastypie api application with angularjs as the JavaScript framework. The main part of this application involves managing curriculum objects, each containing a list of grade objects and each grade object furth ...

What sets apart using the loadText function from loadText() in JavaScript?

I've implemented a basic JS function that loads text lines into an unordered list. Javascript function loadText() { document.getElementById("text1").innerHTML = "Line 1"; document.getElementById("text2").innerHTML = "Line 2"; document.ge ...

Unable to modify the appearance of an HTML element when injected via a Chrome extension

I am currently developing a unique chrome extension that uses Ajax to inject custom HTML into the current tab. This extension appends a <div> element to the body, and now I need to manipulate it using JavaScript. Specifically, I want it to dynamical ...

Issue in VueJs where mutations do not properly save new objects to the state

I am facing an issue with updating my vuex store after modifying my user credentials in a component. Below is the code snippet for reference: mutations: { updateUserState: function(state, user) { state.user = user; }, } actions: { updat ...

Getting the hang of AngularJS nested controllers: Accessing and utilizing external controller functions

I'm currently working through a programming exercise from a book and I am unsure if I have made an error. I have two controllers in my code, both containing a function with the same name: app.controller('externalController', ['$scope&a ...

Steps for resetting data() on a route without parameters:

Having trouble restarting a route on a new editor I have a specific route /editor as well as /editor?_id=dasd448846acsca The /editor route consists of a simple form with empty inputs, while the /editor?_id=dasd448846acsca route has the same component bu ...