angularjs中json数据的行跨度

Posted 2023-03-05

【中文标题】angularjs中json数据的行跨度

【英文标题】：rowspan for json data in angularjs

【发布时间】：2016-02-03 08:58:07

【问题描述】：

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
  
]

我想要这种格式的输出：

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

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

【问题讨论】：

创建一个html表来显示那个json

我使用了 rowspan 但无法得到解决方案

你能添加你尝试过的html吗

表格应该使用Angular jS显示

【参考方案1】：

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

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>

这是一个正常工作的插件：

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

【讨论】：

如果数据是这样 $scope.data = [ 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，名称：'E']； );

在这种情况下我们可以使用 rowspan 吗？.. 因为 y 应该对齐到 4 而 x 应该显示在 1 和 2 之间。

那么你将不得不在显示数据之前计算具有相同值的位置的数量，然后添加具有该值的rowspan。

是的，我可以计算位置的数量并发送到 html..但无法输入不同的数量。你可以为硬编码的行跨度 2、3、4 做到这一点...... .json 数据：$scope.data = [ 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:'E' , location:'z', id:7, name:'E' , location:'z', id:8, name:' E' , location:'z', id:9, name:'E' , ];

查看我的更新，进行了一些修复和优化，现在它应该可以在任意数量的相同位置正常工作。