Guide on how to make a table with alternate colspan using Angular

I am looking to create a table layout similar to the following:

<div ng-controller="MyCtrl">
    <table>
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
                <th>col5</th>
            </tr>
        </thead>
        <tbody>
            <div ng-repeat="item in items">
                <tr>
                    <td>{{item.val1}}</td>
                    <td>{{item.val2}}</td>
                    <td>{{item.val3}}</td>
                    <td>{{item.val4}}</td>
                    <td>{{item.val5}}</td>
                </tr>
                <tr>
                    <td colspan="5">QWERTY</td>
                </tr>
            </div>
        </tbody>
  </table>
</div>

Answer №1

If you find yourself unable to achieve your desired outcome with a single ng-repeat, consider using ng-repeat-start and ng-repeat-end. For example:

<tbody>
    <tr ng-repeat-start="item in items">
        <td>{{item.val1}}</td>
        <td>{{item.val2}}</td>
        <td>{{item.val3}}</td>
        <td>{{item.val4}}</td>
        <td>{{item.val5}}</td>
    </tr>
    <tr ng-repeat-end>
        <td colspan="5">QWERTY</td>
    </tr>
</tbody>

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

Is there an efficient method for transferring .env data to HTML without using templating when working with nodejs and expressjs?

How can I securely make an AJAX request in my html page to Node to retrieve process.env without using templating, considering the need for passwords and keys in the future? client-side // source.html $.get( "/env", function( data ) {console.log(data) ...

Encountering a React Runtime issue: The element type is invalid, expecting a string for built-in components or a class/function for composite components

Here is a glimpse of my code: import { React, useState, useEffect } from 'react'; import { GoogleMapReact } from 'google-map-react'; import styles from './Location.module.scss'; import pinstyles from './TheMap.module.scss ...

Issue encountered with ngRoute dependency injection, despite successful loading of angular-route.js.min file

I'm struggling to understand why the module isn't loading properly with ngRoute. Even though I have included angular and angular-route scripts from a CDN, I keep encountering the error Error: $injector:modulerr Module Error <!--Angular--&g ...

Error: jsonFlickrFeed has not been declared

My request is as follows: const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne"; try { $.ajax({ url: flickrApiPoint, dataType: 'jsonp', data: { "format": "json" }, success: function (data) { c ...

Deploying a web application using Rails, Angular, and sqlite3 technology

As a newcomer to this field, I am currently in search of a free web hosting service and have a few questions. Can Heroku support AngularJS, Ruby on Rails, and sqlite3? What other reliable free web hosting options are available for personal portfolio or b ...

"Error: Unable to calculate the sum because s.sum is not recognized as a valid function. This occurred while trying to sum the property values of

I have a JavaScript object with JSON data var info = [ { "MONTH":" 2018-01", "DEPARTMENT":"Legals", "EMPLOYEE":"Smith A.", "AMOUNT":"14289.66" }, { "MONTH":" 2018-01", "DEPARTMENT":"Legals", "EMPL ...

Manipulate the dimensions of an item in Three.js

I am a beginner in Three.js and I am looking to create a 3D scene with multiple objects floating in the sky and a scale displayed on the screen. The scale should be movable up and down to bring the objects closer or further away, creating the illusion of ...

Error encountered during decryption with AES encryption: 'ERR_OSSL_EVP_WRONG_FINAL_BLOCK_LENGTH'

I am attempting to decrypt data retrieved from MongoDB using a key and initialization vector (IV) that were stored in an environment function. However, I keep encountering the following error: ERR_OSSL_EVP_WRONG_FINAL_BLOCK_LENGTH app.get("/recieve", as ...

Error encountered in AngularJS when utilizing the Flickr API with the parameter "nojsoncallback=1": Unexpected token Syntax

My AngularJS application is trying to access the Flickr API. I need the data in RAW JSON format without any function wrapper, following the guidelines provided in the documentation by using &nojsoncallback=1. However, I keep encountering a console er ...

Does the current protected route that I am on restrict the user from navigating back to the Home component?

I'm having trouble figuring out how to redirect the user to the Home component when they logout. The API is functioning correctly based on my tests. However, I am unsure of how to implement the logout method in the current context to successfully log ...

What is the best approach to execute this function repeatedly at specific intervals?

I'm attempting to execute everything inside the checkUser() function, but it's not running at the specified interval. Is there a more efficient way to achieve this? My goal is to verify the address every few minutes. The line const accounts = awa ...

jQuery Ajax allows scripts to be contained within a page, even if the page itself is empty

Utilizing jQuery ajax to display an HTML page that includes javascript functions, here is my code: function ChartBook() { $.ajax({ url: '/Charts/ChartBook', dataType: 'html', id: 1, ...

Images for Branding Your New Tab

Can you assist me in changing the title of a new tab I am initiating? The new tab that I'm creating consists of an iframe with an image as its source. While opening the tab, I am encountering difficulties in utilizing document.title. var customTab = w ...

AngularJS struggles to properly initialize input[type=range] when faced with large numeric values

I am currently facing an issue with binding an input of type range to AngularJS. Below is the HTML code I am using: <input type="range" min="{{test.testMin}}" max="{{test.testMax}}" step="{{test.testStep}}" ng-model="test.testVal" /> And this is h ...

Updating URL on tab selection in Angular Bootstrap Tabs

I am incorporating Bootstrap's Tabs into my project and I want the URL to change when a tab is clicked. For example: /home/first /home/second Unfortunately, I am struggling to make this work properly. Here is the code snippet from my $routeProvider: ...

Utilizing JQuery for parsing information

I am working on a project that involves displaying Google Maps API on one tab and images on another within a container. The goal is to have the image in the second tab change when a location is selected from the list. To achieve this, I have set up a hidd ...

What is the local date format for the Ionic DatePicker?

I have successfully implemented a DatePicker in my Ionic Project, but the date is displaying in the wrong time format. Here is my function: showDatePicker(){ this.datePicker.show({ date: new Date(), mode: 'date', allowOldDates: fal ...

What is the best way to generate an array by extracting items from various nested values?

The structure of the array I'm working with is as follows (with variable objects inside): this.selected_sum_version may contain multiple groups: this.selected_sum_version.sum_item_groups = [ { "id": 1, "name": "GROUP 1", " ...

Tips for invoking a function that yields an object using ng-repeat

I have been attempting to implement nested ng-repeat functionality in my project. The issue I am facing is that the values from the outer ng-repeat need to be passed as a parameter for the inner ng-repeat. I have tried creating a function that returns an a ...

Switch back and forth between two different function loops by clicking

I have implemented two sets of functions that animate an SVG: one set runs in a vertical loop (Rightscale.verticalUp and Rightscale.verticalDown) and the other in a horizontal loop (Rightscale.horizontalUp or Rightscale.horizontalDown). On clicking the SVG ...