如何使用ngrepeat,AngularJS注入空行列表

发布时间：2020-12-17 07:14:02 所属栏目：安全来源：网络整理

导读：我的代码正在运行,但我想知道是否有更好的方法将空行注入表中(仅用于外观和感觉). 这看起来有点多余,但找不到合适的例子如何做得更好. 我现在的代码： tr class="{{row.class}}" ng-repeat="row in someList | filter:{class:'special'}" td{{row.name}}/td/

我的代码正在运行,但我想知道是否有更好的方法将空行注入表中(仅用于外观和感觉).
这看起来有点多余,但找不到合适的例子如何做得更好.
我现在的代码：

<tr class="{{row.class}}" ng-repeat="row in someList | filter:{class:'special'}">
  <td>{{row.name}}</td>
</tr>
<!-- empty row -->
<tr>
  <td>&nbsp;</td>
</tr>
<tr class="{{row.class}}" ng-repeat="row in someList | filter:{class:'other'}">
  <td>{{row.name}}</td>
</tr>
<!-- empty row -->
<tr>
  <td>&nbsp;</td>
</tr>
<tr class="{{row.class}}" ng-repeat="row in someList | filter:{class:'final'}">
  <td>{{row.name}}</td>
</tr>

解决方法

我有两种不同的解决方案：

CSS结合orderBy

您可以使用单个ng-repeat以orderBy：’class’以正确的顺序显示所有行：

<table>
  <tr class="{{row.class}}" ng-repeat="row in someList | orderBy:!'class'">
    <td>{{row.name}}</td>
  </tr>
</table>

在CSS的帮助下,您可以在三个部分之间添加一些视觉空间：

.other td,.final td{
  padding-top:1em;
}

.other ~ .other td,.final ~ .final td{
  padding-top:0px;   
}

您可以在this plunker中看到结果

纯angleJS with groupBy为angular.filter模块

对于此解决方案,您需要将每个块包装到< tbody>为了使用嵌套的ng-repeat.您可以为< tbody>设置样式.标签在中间留一些空格或添加一个空行,如下所示.您可以有条件地隐藏此行以删除表末尾的空行.

<table>
  <tbody ng-repeat="(key,value) in someList | groupBy:'class'">
    {{key}}
    <tr class="{{key}}" ng-repeat="row in value">
      <td>{{row.name}}</td>
    </tr>
    <tr ng-if="key != 'final'"><td>&nbsp;</td></tr>
  </tbody>
</table>

这是the corresponding plunker.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!