angularjs中json数据的rowpan [英] rowspan for json data in angularjs

问题描述

Json数据:-

[{
    location: x,
    id: 1,
    name: A
  },
  {
    location: x,
    id: 2,
    name: B
  },
  {
    location: y,
    id: 3,
    name: C
  },
  {
    location: y,
    id: 4,
    name: D
  }
]

我想要这种格式的输出:

I want the output in this format:

+----------+------+------+
| location |  id  | name |
+----------+------+------+
|          |   1  |  A   |
|    x     +------+------+
|          |   2  |  B   |
+----------+------+------+
|          |   3  |  C   |
|    y     +------+------+
|          |   4  |  D   |
+----------+------+------+

在Angular JS中，我如何获得这种类型的输出.

In Angular JS how can i get this type of output.

推荐答案

在显示数据之前，您应该计算相同位置的数量.

You should count the number of same locations before displaying the data.

var localData = [

    { location:'x', id:1, name:'A' },
    { location:'x', id:2, name:'B' }, 
    { location:'y', id:3, name:'C' }, 
    { location:'y', id:4, name:'D' },
    { location:'y', id:5, name:'E' },
    { location:'z', id:6, name:'F' },
  ],
  i, j;

  for(i = 0; i < localData.length; i++){
      var l1 = localData[i].location;

      localData[i].rowspan = 1;

      for(j = i+1; j < localData.length; j++){
        var l2 = localData[j].location;
        if(l1 == l2){
          localData[i].rowspan += 1;
        }
        else{
          break;
        }
      }
      i = j-1;
  }
$scope.data = localData;

表格:

 <table border="1" cellpadding="15">
     <tr ng-repeat="row in data">
      <td ng-if="row.rowspan" rowspan={{row.rowspan}}>{{row['location']}} </td>
      <td>{{row['id']}}</td>
      <td>{{row['name']}}</td>
     </tr>
 </table>

这是一个正在工作的小伙子:

Here is a working plunker:

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

这篇关于angularjs中json数据的rowpan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！