AngularJS重复使用表格和行距以及元素过滤

Question

我想创建一个使用rowspan将数据分组为ng-repeat的html表格。

布局工作正常，但当我向表中添加过滤器时遇到问题。

例如，当我通过“类别”列以“STD”值筛选表格时，它会中断布局。

我已创建此JsFiddle以显示该问题。

任何推荐的方法来管理？

这是与该question相关：

问候。

Answer 1

我没有太多的时间看这个，但看来你的问题就在这里：

<tr ng-repeat-start="state in country.states | filter:{stateCode:stateCodeFilter}" ng-if="false"></tr> 

<tr ng-repeat="city in filteredMappings = (state.cities | filter:{category:categoryCodeFilter})"> 

    <th ng-if="$parent.$first && $first" rowspan="{{country.rowSpan}}"> 
     {{country.countryCode}} 
    </th> 

的$父$第一设置为false，在过滤器的使用情况，因为$ parent。$ first是未过滤国家/地区列表中的第一个项目，但您从未在第二个中继器中找到此项目，因为它已被过滤器删除。这导致行中的第一个单元格被隐藏，因此整个表格设计正在变形。

我现在没有任何快速解决方案，但是如果我找到一些时间，我会稍后再看看。希望它至少帮助你一点。