Angularjs using Rowspan in Collections

Question

I have collections of data coming from JSON request.. that i want to display with row span using angular.. but its not yet working properly.. hopefully you can help me with this.

$scope.data = [
    {
        order_number: "A-0001",
        name: "computer 01-01",
        status: 'new'
    },
    {
        order_number: "A-0002",
        name: "computer 02-01",
        status: 'new'
    },
    {
        order_number: "A-0001",
        name: "computer 01-02",
        status: 'new'
    },
    {
        order_number: "A-0003",
        name: "computer 03-01",
        status: 'check'
    },
    {
        order_number: "A-0001",
        name: "computer 01-03",
        status: 'new'
    },
    {
        order_number: "A-0003",
        name: "computer 03-02",
        status: 'check'
    }

];

I want my collections to display in a table like this.

<table class="table table-bordered table-hover">
      <thead>
          <tr>
              <th>Order Number</th>
              <th>Name</th>
              <th>Status</th>
          </tr>
      </thead>
      <tbody>
         <tr>
                <td rowspan="3">A-0001</td>
                <td>01-01</td>
                <td>new</td>
         </tr>
         <tr>
                <td>01-02</td>
                <td>new</td>
         </tr>
         <tr>
                <td>01-03</td>
                <td>new</td>
         </tr>
         <tr>
                <td>A-0002</td>
                <td>02-01</td>
                <td>new</td>
         </tr>

      </tbody>
  </table>

demo plunker

MaskedTwilight · Accepted Answer · 2016-03-01 07:56:52Z

2

For a true angular solution, you shouldn't need javascript to alter the dom. Angular's goal is to have the data itself dictate how controls are rendered.

Are you able to change your data structure? I find it a bit odd that you have id's that aren't unique. I took the liberty of changing it so that each order has a set of sub_orders, which consist of the name and status.

Here's a working plunker with an altered data structure. http://plnkr.co/edit/lpfAJPejfVGaJqB8f6HR?p=preview

Data structure:

$scope.data = [
     {
       order_number: "A-0001",
       sub_orders: [
         {
           name: "computer 01-01",
           status: "new"
         },
         {
           name: "computer 01-02",
           status: "new"
         },
         {
           name: "computer 01-03",
           status: "new"
         }
         ]
     },
     {
       order_number: "A-0002",
       sub_orders: [
         {
           name: "computer 02-01",
           status: "new"
         }
         ]
     },
     {
       order_number: "A-0003",
       sub_orders: [
         {
           name: "computer 03-01",
           status: "new"
         },
         {
           name: "computer 03-02",
           status: "new"
         }
         ]
     }

    ];

Here's the angular code for rendering the table:

<table class="table table-bordered table-hover">
      <thead>
          <tr>
              <th>Order Number</th>
              <th>Name</th>
              <th>Status</th>
          </tr>
      </thead>
      <tbody ng-repeat="order in data">
        <tr>
          <td rowspan="{{order.sub_orders.length + 1}}">{{order.order_number}}</td>
        </tr>
         <tr ng-repeat="suborder in order.sub_orders">
           <td>{{suborder.name}}</td>
           <td>{{suborder.status}}</td>
        </tr>
      </tbody>
  </table>

answered Mar 1, 2016 at 7:56

MaskedTwilight

931 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anthony Pillos Over a year ago

thank you for your solution.. yup your right, better to restructured my data.. and i didnt put my id in my example.. bcoz i just want togroup it by orders using rowspan

Anthony Pillos Over a year ago

By the way. What if i want the status to have rowspan same as order number? Is that possible?

MaskedTwilight Over a year ago

It's possible, but it wouldn't be very clean. You'd basically have to use Sonaryr's solution, where you order the suborder's by the status, and use a function to determine the rowspan. Off the top of my head, I can't think of a data structure that would allow this.

MaskedTwilight Over a year ago

You can change the data structure further, so it's a hierarchy of order numbers containing statuses that contain names, but I wouldn't really recommend it. Your data structure would begin to lose it's meaning.

Sonaryr · Accepted Answer · 2016-03-01 08:08:14Z

1

Just made a quick and dirty solution to your problem using the data provided

http://plnkr.co/edit/fvVh73sXfIRLHw42Q2XM?p=preview

I ordered the data with ng-repeat and orderBy

ng-repeat="item in data | orderBy: 'order_number'"

And then using functions I checked if we needed a rowspan or not.

A Better solution for you would be to refactor the data,like MaskedTwilight's solution suggests, so that your order are already grouped per order number and that your items are a subcollection of this order. That whay you can reduce the code and watchers.

edited Mar 1, 2016 at 8:08

answered Mar 1, 2016 at 7:55

Sonaryr

1,1222 gold badges10 silver badges24 bronze badges

2 Comments

Anthony Pillos Over a year ago

this solution is very straight forward.. this one works too.. but what if... i want to have a rowspan for order_number and status?.. or other column with same value to group..

Sonaryr Over a year ago

Like I said, it is a quick and dirty solution, not perfect, for your changes you will need to refactor your data as MaskedTwilight answer.

Collectives™ on Stack Overflow

Angularjs using Rowspan in Collections

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related