Developing Angular.js tables

Question

Developing Angular.js tables

Looking to create a table in Angular.js with cells that span multiple rows.

For example, check out this example.

Here's some sample data:

var data = [{Colors: ["red","green","blue"]}]

Desired output:

<table>
  <tr>
    <td rowspan="3">Colors</td>
    <td>red</td>
  </tr>
  <tr>
     <td>green</td>
  </tr>
  <tr>
     <td>blue</td>
  </tr>
 </table>

I currently have it set up using the ng-show directive, but this still creates an extra cell that is hidden. I'm hoping for a proper rendering of the table without any extras.

Using ng-switch isn't an option due to strict parsing limitations in certain elements like tables.

Any suggestions on how to achieve this?

javascript angularjs

Answer 1

Answer №1

Typically, you would utilize ng-switch for a situation like this, which selectively adds or removes elements from the DOM, unlike ng-show/ng-hide which simply toggles visibility.

However, ng-switch doesn't cooperate well with tables due to requiring an additional element for the switch statement.

Fortunately, there's a custom directive known as 'if' that functions by applying conditional logic to one attribute of an element, dynamically adding or removing it from the DOM. It's quite clever :-).

Take a look at this demonstration (check out the 'Resources' panel on the side, I imported it from github). http://jsfiddle.net/5zZ7e/.

I also demonstrated how you can structure your controllers without relying on global variables within.

Answer 2

Typically, you would utilize ng-switch for a situation like this, which selectively adds or removes elements from the DOM, unlike ng-show/ng-hide which simply toggles visibility.

However, ng-switch doesn't cooperate well with tables due to requiring an additional element for the switch statement.

Fortunately, there's a custom directive known as 'if' that functions by applying conditional logic to one attribute of an element, dynamically adding or removing it from the DOM. It's quite clever :-).

Take a look at this demonstration (check out the 'Resources' panel on the side, I imported it from github). http://jsfiddle.net/5zZ7e/.

I also demonstrated how you can structure your controllers without relying on global variables within.

Answer 3

Answer №2

Providing responses utilizing the latest version of Angular.

As stated by Andrew Joslin, the ng-show function conceals the element (utilizing display: none). On the other hand, ng-switch removes non-matching elements rather than merely hiding them. However, it necessitates an extra element for the switch-when expression.

Since the previous response, the inclusion of ng-if in Angular eliminates the need for an external library.

(function(win) {
  angular.module('myApp', [])
    .controller("Tester", function($scope) {
      $scope.data = {
        Colors: ["red", "green", "blue"]
      }
    })
}(window));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
  <h1>old code converted</h1>
  <p>Just upgraded to a newer version of AngularJS.</p>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-show="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
  <h1>solution via ng-if</h1>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-if="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 4

Providing responses utilizing the latest version of Angular.

As stated by Andrew Joslin, the ng-show function conceals the element (utilizing display: none). On the other hand, ng-switch removes non-matching elements rather than merely hiding them. However, it necessitates an extra element for the switch-when expression.

Since the previous response, the inclusion of ng-if in Angular eliminates the need for an external library.

(function(win) {
  angular.module('myApp', [])
    .controller("Tester", function($scope) {
      $scope.data = {
        Colors: ["red", "green", "blue"]
      }
    })
}(window));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
  <h1>old code converted</h1>
  <p>Just upgraded to a newer version of AngularJS.</p>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-show="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
  <h1>solution via ng-if</h1>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-if="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>

Developing Angular.js tables

Answer №1

Answer №2

Similar questions

Getting PHP Data from AngularJS: A Step-by-Step Guide

What is the best way to retrieve the value from local storage?

Jackson was puzzled by the bidirectional one-to-many relationship and failed to lazily initialize the collection

Why does Vue only change a specific array element without updating the DOM?

What strategies can I use to enhance the quality of a document I'm about to create? (Using Firebase and React)

Tips for streamlining IF statements with multiple conditions

Is there a way to use the onclick event to open a link in the same window and tab?

The choices in the second dropdown menu will change based on the selection made in the first dropdown menu

Monitoring inbound and outbound traffic in express middleware

Verify whether an object possesses all the attributes of a class in TypeScript

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

When a function encounters an error, load a fresh page

Modifying the id attribute dynamically using jQuery during runtime

Retrieving data from multiple files using node.js

What is the best approach to link an HTML document to a MySQL Workbench server utilizing JavaScript, Ajax, and PHP?

What is causing the slight space between the navbar and the edges of my webpage?

Use jQuery to detect the presence of the class .class, and if it exists, automatically append the same class to a specific #id element on a particular webpage

Jquery Enhancement for Navigation

Cease the use of bi-directional data binding on an Angular directive

AngularJS expressions enclosed in double curly braces will not function properly within tag attributes