AngularJS: creating dynamic rowspan in tables

Can you guide me on how to create a table with ng-repeat in AngularJS that has 4 columns followed by a row with a colspan of 4 and so forth?

The angular code I have retrieves data from an HTML database.

<table>
    <thead>
        <tr>
            <th class="min">
                #
            </th>
            <th>Base</th>
            <th>e-mail</th>
            <th>buserd</th>
            <th>access</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="base in list">
            <td class="center">
                <span class="btn-group">
                    <button type="button" id="btn{{pessoa.id_pessoa}}" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-expanded="false">
                        <i class="icon-cogs"></i>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-click="ficha(base)"><a href="javascript:void(0)"><i
                                    class="icon-personalizado fa fa-fw fa-file-text-o"></i>Ficha</a></li>
                        <li ng-click="editar(base)"><a href="javascript:void(0)"><i class="icon-pencil-4"></i>
                                Editar</a></li>
                        <li ng-click="ficha(base)"><a href="javascript:void(0)"><i class="icon-barcode"></i>
                                Imprimir
                            </a></li>
                        <li ng-click="ficha(base)"><a href="javascript:void(0)"><i class="icon-share-alt"></i>
                                despacho</a></li>
                    </ul>
                </span>
            </td>

            <td>
                <span ng-click="ficha(base)" ng-style="{'cursor': 'pointer'}">{{base.num_protocolo}}</span><br>
                <small id="ln{{base.id}}" class="label label-danger"></small>
            </td>
            <td>
                <span>{{base.interessado}}</span>
                <span>{{base.observacoes}}</span>
            </td>
            <td>{{base.data}}</td>
            <td>{{base.assunto}}</td>
        </tr>
    </tbody>
</table>

Using ng-repeat simply.

ng-repeat for dynamic table creation.

Answer №1

If you want to display items in a container and repeat the first row while adding a second row with a colspan, one way to achieve this is by using ng-container in Angular. Here's a code snippet demonstrating how it can be done:

<ng-container *ngFor="let base of list; let i = index">
  <tr>
     <!--- Row of base.* //-->
  </tr>
  <tr>
     <td colspan="4">Observations</td>
  </tr>
</ng-container>

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

Unlocking the Secrets of JSON Data Retrieval

Could someone assist me in extracting data from the json provided below? I have received a json data in the following format, where each record contains "{0}". My query is how can I retrieve data from this format or if there is a way to remove "{0}" from ...

Problem with Ajax causing full-page reload

I currently have a webpage that utilizes JqueryUI-Mobile (specifically listview) in conjunction with PHP and some Ajax code. When the page loads initially, it displays a list generated from a MySQL DB. I want this list to refresh itself periodically witho ...

Javascript cards arranged in descending order

I'm in the process of developing a sorting feature that arranges cards in the DOM from Z to A with the click of a button. Although I've successfully implemented the logic for sorting the array, I'm facing difficulties in rendering it. Withi ...

AngularJS AJAX request failing due to CORS issue

1. I'm having trouble with a CORS error in my AngularJS code for cross domain requests. Despite trying various solutions, I can't seem to pinpoint the mistake. Can someone please help troubleshoot this issue? The specific error message I'm e ...

Troublesome CSS conflicts arise when using minified assets with AngularJS and Webpack

After transitioning my Angular project to the Webpack build system, I encountered issues with Angular Dependency Injection in the JS source code. Surprisingly, now I am facing JS errors that are targeting CSS files, leaving me completely bewildered about w ...

I am struggling with sending post requests in Node.js

I am currently facing a challenge with handling form data from a webpage using Node.js and writing that data to a file. It seems like there might be an issue with how Node.js is processing my POST request, or perhaps the way I am sending the request from t ...

JavaScript code for computing the error function of Gauss

Are there any freely available implementations of the Gauss error function in JavaScript under a BSD or MIT license? ...

Navigate to the DIV element inside the Bootstrap Modal

I am having trouble getting 3 buttons to scroll to different sections when triggering the same modal. Can anyone provide assistance? <a data-toggle="modal" data-target="#myModal" class="btn-goto-section-1"> Launch modal </a> <a data-toggl ...

The error TS2339 is indicating that there is no property called myProperty on the type SetStateAction<User>

I'm encountering a TypeScript error while working with React that's leaving me puzzled: <html>TS2339: Property 'subEnd' does not exist on type 'SetStateAction&lt;User&gt;'.<br/>Property 'subEnd' d ...

What is the best way to retrieve data once an action has been completed in Redux?

After triggering specific actions to update an array of objects in my global state, I want to send a PUT request to my Firebase database. This action can involve adding, deleting, or editing objects within the array, and I need to initiate the request righ ...

Utilizing Algolia backend search capabilities enhanced by the Algolia Search Helper library specifically designed for Angular.js

I'm considering sending the search request to Algolia using the backend for security reasons. I came across information here stating that Instantsearch allows this by specifying a custom customSearchClient and passing it as a parameter. Even though I ...

jQuery functions do not have any impact on newly appended elements

Why are jQuery functions not affecting appeneded elements after ajax? I am aware of two possible solutions, but neither seems optimal. Firstly, when I append an element, I also re-append the jQuery functions each time. This means that for every appended ...

MEAN stack application that has an input field with a dynamic attribute which saves as undefined

How come the value for a dynamic attribute is showing up as "undefined" in my form? I initially thought it was related to a hidden input, but the issue persists even when the input is not hidden. When trying to save a new event, I want the user to be able ...

Checking for mobile SSR in a ReactJS applicationUncover the signs of mobile

I recently integrated the mobile-detect library into my project following this informative tutorial: link /src/utiles/isMobile.tsx: import MobileDetect from "mobile-detect"; import { GetServerSidePropsContext } from "next"; export co ...

The jQuery selector fails to refresh after the dynamic insertion of new elements

My selector is: $('section#attendance input:last') However, I add another input to section#attendance. I want the selector to target that new element since it should select the last element due to :last. However, for unknown reasons, it does no ...

display saved data from ajax request

I've been working on saving data and files using ajax. Following a tutorial (link), I managed to successfully save the data in the database and the image files in the designated folder. However, I'm facing an issue where the success or error mess ...

Retrieve all instances of a key-value pair within an object that share the same key

Here is some JSON data: [{"name":"David","text":"Hi"},{"name":"Test_user","text":"test"},{"name":"David","text":"another text"}] I am l ...

"Clicking on a jQuery div will cause it to slide down, and clicking again

I am currently working on this code snippet: $("#right").click(function() { $("#signin").stop().slideDown(300); }); At the moment, it drops down when clicked, but I would like it to slideUp() when clicked again. Your help is appreciated. On a relate ...

What is the best way to attach several URLs to a single component?

I am currently using Next.js Here is the structure I have: https://i.stack.imgur.com/jRQBS.png I am in need of opening the same component for multiple URLs, such as 'http://localhost:3000/hakkimizda', 'http://localhost:3000/cerez-politika ...

Tips for managing accordion events using a button press

I found a script online that I want to modify. Specifically, I am looking to create a button that will control the accordion event by closing the current div and opening the next one. <button> Click me to open next</button> inside each div in ...