与AngularJs的Rowspan

Question

我需要一些有关angularJs的 ng-repeat 的帮助。我尝试使用 colspan 和以下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"
      }
   ]
}

这是我试图呈现的表格：

我怎样才能做到这一点？

提前致谢！

更新 - 原始数组 这是我从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"}, ... ,]

Answer 1

将ng-repeat与limit过滤器的组合正确使用即可实现。

<强> 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>

<强>代码

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