When using ng-repeat in Angular.js, an additional td is created

https://jsfiddle.net/gdrkftwm/

https://i.sstatic.net/CTi2F.jpg

I have encountered a problem while creating a table from a Json object. There seems to be an extra td being generated, and I'm not sure why. I want the structure of my table to resemble the image provided:

https://i.sstatic.net/ORNB7.jpg

     <div ng-app="app">
        <div ng-controller="Controller">
            <table border='1'>
              <tr>
                <th rowspan="2">Tipo de Contenido</th>
                <th colspan="{{aTipoUsuarios.length}}">Tipo de Usuarios</th>
              </tr>
              <tr>
              <td ng-repeat="usu in aTipoUsuarios">{{usu}}<td>
              </tr>

            </table>

        </div>
    </div>

    angular.module('app', [])
      .controller('Controller', function ($scope) {

    $scope.aRoles=
     [
       {
         "tipo_contenido": "articulos", 
         "tipo_usuario":{
          "administrador":
           {"escritura":true, "lectura":true, "eliminacion":true},
          "reportante":
           {"escritura":true, "lectura":true, "eliminacion":true}
         }     
       },
       {
         "tipo_contenido": "informacion", 
         "tipo_usuario":{
          "administrador":
           {"escritura":true, "lectura":true, "eliminacion":true},
          "reportante":
           {"escritura":true, "lectura":true, "eliminacion":true}
         }     
       },
     ]        
    $scope.aTipoUsuarios=Object.keys($scope.aRoles[0].tipo_usuario);
    console.log($scope.aTipoUsuarios)


   });
javascriptangularjs

Answer №1

There appears to be a small error in the code snippet,

Update

From

<td ng-repeat="usu in aTipoUsuarios">{{usu}}<td>

To

<td ng-repeat="usu in aTipoUsuarios">{{usu}}</td>

DEMO

angular.module('app', [])
.controller('Controller', function ($scope) {
$scope.aRoles=
         [
           {
             "tipo_contenido": "articulos", 
             "tipo_usuario":{
              "administrador":
               {"escritura":true, "lectura":true, "eliminacion":true},
              "reportante":
               {"escritura":true, "lectura":true, "eliminacion":true}
             }     
           },
           {
             "tipo_contenido": "informacion", 
             "tipo_usuario":{
              "administrador":
               {"escritura":true, "lectura":true, "eliminacion":true},
              "reportante":
               {"escritura":true, "lectura":true, "eliminacion":true}
             }     
           },
         ];             $scope.aTipoUsuarios=Object.keys($scope.aRoles[0].tipo_usuario);
        console.log($scope.aTipoUsuarios)
});
!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body ng-app="app">     
        <div ng-controller="Controller">
            <table border='1'>
              <tr>
                <th rowspan="2">Tipo de Contenido</th>
                <th colspan="{{aTipoUsuarios.length}}">Tipo de Usuarios</th>
              </tr>
              <tr>
              <td ng-repeat="usu in aTipoUsuarios">{{usu}}</td>
              </tr>
            </table>
        </div>     
  <script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
  <script type="text/javascript " src="MainViewController.js "></script>
</body>
</html>

Answer №2

An issue with the td tag in relation to ng-repeat has been identified as not being properly closed. Below is the corrected code:

<div ng-app="app">
    <div ng-controller="Controller">
        <table border='1'>
          <tr>
            <th rowspan="2">Tipo de Contenido</th>
            <th colspan="{{aTipoUsuarios.length}}">Tipo de Usuarios</th>
          </tr>
          <tr>
          <td ng-repeat="usu in aTipoUsuarios">{{usu}}</td> <!-- make sure to close this tag -->
          </tr>

        </table>

    </div>
</div>

https://jsfiddle.net/fzwr0hf0/1/

Answer №3

Your Angular code is functioning properly. The issue lies within the ng-repeat HTML.

Please make the following change:

 From : <td ng-repeat="usu in aTipoUsuarios">{{usu}}<td>
 To :   <td ng-repeat="usu in aTipoUsuarios">{{usu}}</td>

You can verify the changes here: https://jsfiddle.net/gdrkftwm/2/

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

While validating in my Angular application, I encountered an error stating that no index signature with a parameter of type 'string' was found on type 'AbstractControl[]'

While trying to validate my Angular application, I encountered the following error: src/app/register/register.component.ts:45:39 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used ...

javascriptangulartypescript

Activate the jQuery click event by specifying the URL

On my webpage, I have a jQuery click function that loads multiple HTML pages into a specified div. I am looking to set specific URLs that will trigger this event, like test.com#about <script type="text/javascript"> $(document). ...

javascriptjqueryhtml

When can you determine if all the ajax requests in a JQuery each loop have finished?

Within my JQuery each loop, I am triggering multiple ajax requests and looking to display a success message once all calls have been completed. Here is my code snippet: $('.container input:checked').each(function() { json_data = $(this).paren ...

javascriptjqueryajax

What is the correct way to execute the query "select * from table where indexA >= 'a' order by indexB ASC limit 10" in indexedDB?

As I delve into learning about javascript IndexedDB, I have encountered a challenge in executing complex queries. My goal is to perform a select query like this one: "select * from table where indexA >= 'a' order by indexB ASC limit 10" I a ...

javascriptindexeddb

What methods can I use to conceal #! from showing on the browser's address bar?

Imagine you have the below link: www.someurl.com/#!?page=index How would you convert it into one of these options: www.someurl.com/#!/index (using mod_rewrite) www.someurl.com/ajax/index (also using mod_rewrite, but replacing #! with ajax) www.someurl. ...

phpjavascriptajaxmod-rewritebrowser

JavaScript Delayed Redirection

I'm attempting to launch opera from the command line and have it redirect to a page after 30 seconds. Here's what I currently have: C:\Programme\Opera\opera.exe -newpage javascript:function%20func1(){window.location.href='htt ...

javascriptcommand-lineopera

We will explore the process of accessing a CSS file within an Angular

I'm having trouble reading a CSS file from my UI project directory in AngularJS. When I make a GET call, I only get the index.html file as output instead of the CSS file. Can anyone provide some guidance on how to properly access the CSS file? Any su ...

javascriptangularjs

Can multiple `npm install` commands run at the same time?

Is it possible to have concurrent runs of npm install, or will they conflict on shared resources and create potential race conditions? Analyzing the code might not provide a clear answer, but for those working on developing npm, this is likely an implicit ...

javascriptnode.jsdeploymentconcurrencynpm

Rating of displaying an undefined value (NaN)

I'm having issues with creating a currency conversion calculator, as the result is showing as NaN. Can anyone offer assistance? I've tried multiple solutions but have been unable to resolve it. Check out the following JavaScript code snippet: c ...

javascripthtmlfetch-api

The particular division is failing to display in its designated location

This is quite an interesting predicament I am facing! Currently, I am in the process of coding a website and incorporating the three.js flocking birds animation on a specific div labeled 'canvas-div'. My intention is to have this animation displa ...

javascriptcsscanvasthree.js

Keep your filter content up-to-date with real-time updates in Vue.js

I am facing an issue with a markdown filter where the content of component.doc is set to update through a websocket. Despite updating the scope's component, the filtered content remains unchanged. Is there a way to dynamically refresh the v-html in t ...

javascriptvue.js

Issue: In Firefox, resizing elements using position:absolute does not work as expected

My resizable div code looks like this: #box { height: 10rem; width: 10rem; resize: both; overflow: hidden; border: solid black 0.5rem; position: absolute; pointer-events: none; } <div id="item"></div> While it works perfectly ...

javascripthtmlcss

Extracting the JQuery library from its source code

Is there a simple method for extracting only the necessary functions from the jQuery library? I have found that many of the functions within the library are not being utilized, so it would be beneficial to remove them. ...

javascriptajaxjquery

Using an arbitrary object as an argument in a CoffeeScript anonymous function

When I execute the below Coffeescript code: @total = (a, b) -> a + b The resulting compiled Javascript is: (function() { this.total = function(a, b) { return a + b; }; }).call(this); Is there a method in Coffeescript to substitute ...

javascriptcoffeescript

Tips for avoiding double reservations and creating time slots with nextjs and prisma

Welcome to my NextJS app booking system. As a beginner, I'm exploring how to create a website for simple bookings and have successfully connected it to Netlify. Currently, I can gather booking details such as time and name using Netlify forms. Howeve ...

javascriptnode.jsreactjswebnext.js

Tips on incorporating Angular Oboe without encountering the error message "oboe is not defined"

Trying to implement "angular oboe" for handling large JSON responses in HTTP requests. I have added the library and created a function in my controller, but I am encountering an error message saying "Error: oboe is undefined". Unsure if I missed including ...

angularjs

An issue arises when request.body appears blank within the context of node.js, express, and body

I am currently attempting to send a request to my node server. Below is the xhttp request being made. let parcel = { userId: userId, //string unitid: unitid, //string selections: selections //array }; // Making a Call to the Server using XMLHttpR ...

javascriptnode.jsexpressxmlhttprequestbody-parser

`Can you provide instructions on modifying CSS using JavaScript once the window size reaches a specified threshold?`

Is there a way to use JavaScript to automatically adjust the font size when the screen reaches 1050px? ...

javascripthtmlcss

Storing user input from Vue.js in a JavaScript array for future use

Utilizing vue.js <template> <input id="email" v-model="email" type="text" placeholder="Email"> <input id="name" v-model="name" type="text" placeholder=" ...

javascripthtmlvue.js

Could someone provide me with a breakdown of this code utilizing the .bind() function?

The code snippet above is from the jQuery source code and it deals with event handling. It defines an array of events, such as click, focus, blur, etc., and then adds each event to the jQuery prototype using a forEach loop. var events = ['click', ...

javascriptjqueryjquery-events