Angularjs：利用行跨度的分组分层数据 [英] Angularjs: use of rowspan to group hierarchical data

问题描述

是否有可能组数据（使用行跨度为解释这里 ）与渲染表angularjs。数据是分层次的，具有状态有许多县，每个县有多个拉链codeS 。我想与州，县，拉链等仅列的表（所以给该集合的长度的行跨度）。我不知道 NG-重复启动和 NG-重复端可用于实现这一目标。请参阅启动模板这里

Is it possible to group data (using rowspan as explained here) in a table rendered with angularjs. Data is hierarchical, with state having many counties and each counties has multiple zipcodes. I want a table with only column for state, county, zip etc (so give a rowspan for length of the collection). I am not sure ng-repeat-start and ng-repeat-end can be used to achieve this. Please see the starter template here

 <table>
    <thead>
      <tr>
        <th>State</th>
        <th>County</th>
        <th>Zip</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='st in states'>
        <td>{{st.name}}</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

数据

 var oh_counties = [
    {name: "Franklin", zips: [111,222,333,444,555]},
    {name: "Adams", zips: [111,222,333,444]},
    {name: "Allen", zips: [111,222,333]}
    ],
    wi_counties = [
    {name: "Dane", zips: [111]},
    {name: "Adams", zips: [111,222,333,444]}
    ]

    $scope.states = [
      {name: "OH", counties: oh_counties},
      {name: "WI", counties: wi_counties},
      ];

编辑：

所需的输出的手工制作的版本在这里<一个href=\"http://plnkr.co/edit/T7toND0odx6qr8mVC121?p=$p$pview\">http://plnkr.co/edit/T7toND0odx6qr8mVC121?p=$p$pview

推荐答案

这是霍利康明斯回答的一个变种。重复移入 TR 与 NG-重复启动和 NG-重复性结束来prevent的 TBODY 被重复。还采用了略有不同的方法来隐藏第一行。

This is a variant of Holly Cummins' answer. The repeat is moved into the tr with ng-repeat-start and ng-repeat-end to prevent the tbody from being repeated. Also uses a slightly different method to hide the first row.

<tbody>
    <tr ng-repeat-start='st in states'>
      <th rowspan="{{st.counties.length}}">{{st.name}}</th>
      <td>{{county[0].name}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat='county in st.counties' ng-hide="$first">
       <td>{{county.name}}</td>
    </tr>
</tbody>

这篇关于Angularjs：利用行跨度的分组分层数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！