conditionally manipulate colspan attribute with AngularJS

Is there a way to dynamically change the value of the 'th' colspan attribute based on a condition in Angular?

I have attempted the following code, but it doesn't seem to be working. Can someone point out what might be incorrect here?

<th ng-attr-colspan="{{2}}" ng-repeat="header in ::tableHeaders track by $index">'+ '{{header}}</th>

Alternatively, I have also tried using a function to set the colspan attribute:

<th ng-attr-colspan="someFunct()" ng-repeat="header in ::tableHeaders track by $index">'+ '{{header}}</th>

Although the following code works, I am looking for a way to change the value of the colspan attribute dynamically:

<th colspan="{{2}}" ng-repeat="header in ::tableHeaders track by $index">'+ '{{header}}</th>
javascriptangularjs

Answer №1

Make sure to include quotes for the attribute. Remember that in AngularJS, curly braces only provide text, not expressions.

For the desired effect, consider the following straightforward approach:

<th colspan="{{header.cols}}" ng-repeat="header in tableHeaders track by $index">
      {{header.text}}
</th>

Alternatively, you can use a function to determine the colspan number: 

  $scope.tableHeaders = [{
    text: 'Header 1',
    cols: 1
  },{
    text: 'Header 2',
    cols: 2
  },{
    text: 'Header 3',
    cols: 1
  }];
  $scope.getColsSpan = function(header){
     return parseInt(header.text.split(' ').pop());
  };

In the HTML: 

<th colspan="{{getColsSpan(header)}}" ...

Another option is to use ng-attr-colspan, but it still requires curly braces for expression evaluation:

     <Th ng-attr-colspan="{{header.cols}}"

To see all options in action, check out the example on Plunker

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

leveraging socket.io alongside express router

As someone who is relatively new to node.js, I am currently in the process of creating a webchat application. My project consists of a server.js file and a router.js file where I have defined all my routes. Unlike many others, I am not using express-genera ...

javascriptnode.jsexpresssocket.io

Attempting to discover the secret to keeping a hamburger menu fixed in place once it has been expanded

Exploring this example https:// codepen.io/ducktectiveQuack/pen/mPGMRZ I had trouble understanding the code block, so I resorted to trickery (just remove the space between the '/' and the 'c' lol) My goal is to have the hamburger men ...

javascripthtmlcss

What is the proper method for implementing respond_to with JSON data?

I find myself in a bit of a dilemma: I'm currently developing a centralized controller based on the guidance provided in this query and am encountering some confusion regarding the functionality of the respond_to method. In an API::Controller, my cod ...

ruby-on-railsjsonangularjsruby-on-rails-4

Executing a nested function as an Onclick event in an HTML document

I am currently working on a project within the Phone Gap framework where I need to transfer values from one HTML page to another. My solution involved using the code snippet below. var searchString = window.location.search.substring(1),i, val, params = s ...

javascriptandroidhtmlfunctioncordova

Various methods for deactivating controls in a CSS class

Is there a way to disable all buttons within a specific class? I have attempted the following code without success: $("input.myClass").attr('disabled', true); This is how I am trying to implement it: <script type="text/javascript> ...

javascriptjquerycsswebforms

What is the best way to retrieve user data for showcasing in a post feed using firebase's storage capabilities?

I'm currently developing a forum-style platform where users can share content that will appear on a universal feed. I intend to include user details in the posts (such as photoURL and displayName) similar to how it is done on Twitter. For this projec ...

javascriptjqueryfirebasegoogle-cloud-firestorefirebase-authentication

Guide to building a dual recursion menu in AngularJS using both functional and template methods

I'm currently working on developing a menu in AngularJS using template and functional recursion. The code I have written involves quite a bit of recursion, so I could really use some assistance. Below is the menu data represented in JSON format: var ...

javascriptangularjsjsonrecursion

Strapi: Enhancing User Experience with Unique Passwordless Customization Services

I have been attempting to modify the "passwordless" strapi plugin in order to generate verification codes consisting exclusively of digits. To achieve this, I need to override the createToken function within the plugin's service. Following the instru ...

javascriptnode.jsstrapi

Leveraging Django template tags in JavaScript

Currently working on a project that does not have a slug field, and this value is created in the template using: {{ n.title|slugify }} I need to incorporate the slug into a jQuery function, but the variable always remains empty: $("select#model").click( ...

javascriptdjangodjango-templates

Is there a jQuery alternative to the collect and map functions in Prototype?

Is there a similar iterator function in jQuery that functions like "collect" and "map" in Prototype? These functions provide the result of applying an iterator to each element: Appreciate the help! ...

javascriptjqueryarraysprototypejs

Firebase Hosting integrated with Cloud Functions

Struggling with deploying my functions and hosting. While I have managed to get them working separately on different branches, integrating both hosting and cloud functions is proving to be a challenge. It seems like my cloud function is not deploying succ ...

javascriptnode.jsfirebasegoogle-cloud-functionsfirebase-hosting

Java REST service remains out of reach for JavaScript fetch call

Currently, I am in the process of learning about REST API. My goal is to make a call to a POST service implemented in Java from Javascript using fetch. However, I have encountered an issue where the request fails to reach the service whenever the @Produces ...

javascriptjsonrestpostfetch

Avoid changing the regex pattern if it is surrounded by a specific character

I want to change all occurrences of strings enclosed by - with strings enclosed by ~, unless the string is again surrounded by *. For instance, consider this string... The -quick- *brown -f-ox* jumps. ...should be altered to... The ~quick~ *brown -f-ox ...

javascriptjqueryregex

Using the section :export in the SCSS :root declaration

In the file test.module.scss, I store all my variables for colors, typography, and more. I want to be able to use these variables in my react components. However, the file starts with :root to define the variables: :root{ --color-white: #fff; --color-b ...

javascriptcsssassexporticss

Does angular-sortablejs work with angular 5?

I attempted to use angular-sortables in combination with the ng-drag-drop library to sort the list items that are being dragged, but it appears that nothing is happening when I try to use it. Does anyone know if angular-sortables is compatible with Angular ...

javascriptangularsortablesangular-sortablejs

Send data by using a link tag in AngularJS

I am a beginner with angularJS and I am facing an issue while trying to create a custom button and attach it to my form instead of using a regular button. Despite trying multiple approaches, none of them seem to work well for me. When I press enter inside ...

formsangularjs

vue-dropzone fails to create thumbnails when a file is added

I am facing an issue where I want to upload files that are already stored on my server to the Dropzone. Despite searching extensively through both vue-dropzone and regular dropzone documentation, as well as various GitHub issues for solutions, I have not b ...

javascriptvue.jsdropzone.js

Displaying varied information based on JSON feedback using AngularJS

I am currently in the process of developing an app using AngularJS and the Ionic framework. The app will display a list of data with various subcategories for each item, depending on the account type. View sample image here The issue I am facing is that ...

javascripthtmljsonangularjsionic-framework

Images displayed alongside webpage contents

I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png I've attempted using float left and other commands, but one picture continues to stay in the lower r ...

javascripthtmljquerycssbootstrap-4

Creating dynamic backend routes in NextJS is a great way to add flexibility to

Is there a way for me to implement dynamic backend routes? I am working on an image hosting platform where users should be able to save their images on the server under unique domains like http://localhost/<random_id>. An example link would look so ...

javascriptnext.jsnextjs-dynamic-routing