Rowspan with AngularJs

Question

I need some help with ng-repeat of angularJs. I'm trying to render a table using colspan with the following json:

var json = {
   "actorActress":[
      {
         "name":"Angelina Jolie",
         "age":45,
         "rowspan":2
      },
      {
         "name":"Brad Pitt",
         "age":48,
         "rowspan":3
      }
   ],
   "Films":[
      {
         "film":"Mr & Mrs Smith",
         "other_info":"info1"
      },
      {
         "film":"Tomb Raider",
         "other_info":"info2"
      },
      {
         "film":"Troy",
         "other_info":"info1"
      },
      {
         "film":"Mr & Mrs Smith",
         "other_info":"info2"
      },
      {
         "film":"Fight Club",
         "other_info":"info1"
      }
   ]
}

And this is the table that I'm trying to render:

How can I achieve this?

Thanks in advance!

Update - Original Array This is the original array that I receive from Data Base

var OriginallyJson = [
                       {"name": "Angelina Jolie", "age": 45, "film": "Mr & Mrs Smith", "other_info": "info1"},
                       {"name": "Angelina Jolie", "age": 45, "film": "Tomb Raider", "other_info": "info1"},
                       {"name": "Brad Pitt", "age": 48, "film": "Mr & Mrs Smith", "other_info": "info2"}, ... ,]

Can you change the array structure? Maybe using map to create a new array and not modifying the original. — Alyson Maia
– Alyson Maia, Commented Jun 16, 2018 at 19:36
Yes, I changed to this structure because I thought it would be easier render the table. Initially the json variable was an array with repeated data. I updated my question with the original array structure — Nands
– Nands, Commented Jun 16, 2018 at 20:50

Pankaj Parkar · Accepted Answer · 2018-06-16 20:57:15Z

3

It would be achieved by using ng-repeat with the combination of limit filter correctly.

HTML

<table border="1px solid red">
  <thead>
    <tr>
      <th width="25%">Name</th>
      <th width="25%">Age</th>
      <th width="25%">Films</th>
      <th width="25%">Other Information</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in json.actorActress">
      <td width="25%">{{person.name}}</td>
      <td width="25%">{{person.age}}</td>
      <td width="50%" colspan="2">
        <table width="100%" border="1px">
          <tr width="100%" ng-repeat="f in json.Films | limitTo: person.rowspan: calculateInitialIndex($index)">
            <td width="50%">
              {{f.film}}
            </td>
            <td width="50%">
              {{f.other_info}}
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Code

function calculate(startIndex, index, result){
  if(startIndex == 0 && index == 0) return result;
  result = result + $scope.json.actorActress[--index].rowspan
  if(index == 0) return result;
  return calculate(startIndex, index, result)
}

$scope.calculateInitialIndex = function(currentIndex) {
  var result = 0;
  return calculate(currentIndex, currentIndex, result);
}

Working Plunker

edited Jun 16, 2018 at 20:57

answered Jun 16, 2018 at 20:06

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

Nands Over a year ago

Thanks Pankaj, it's a good answer, but do you think that is possible render the table without using nested tables?

Pankaj Parkar Over a year ago

@Nands its quite tough.. you have to reformat the JSON structure then, I'd recommend to do that, so that solution would also become easier :)

Collectives™ on Stack Overflow

Rowspan with AngularJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related