在使用 AngularJS ng-repeat 和 ui-sortable 的 jquery 可排序之间插入 <hr>

Question

我正在尝试使用 ng-repeat 中的 AngularJS ui-sortable 对 <li> 项目进行排序。 所以代码看起来像这样：

<ul ui-sortable="sortableOption" ng-model="list">
    <li ng-repeat="item in list"> !@#$ </li>
</ul>

在<li>s 之间，我想插入<hr> 标签，这样我就可以在顶部和底部项目之间有一个线条边框（在一定数量的顶部项目之后）。使用索引（例如，如果 index == 4 insert <hr>）不起作用，因为<hr> 在拖动时将跟随<li>。 （拖动时需要固定位置）

有什么简单的方法可以做到这一点吗？现在，我只是在计算每个项目的高度（<li> 的高度）并将<hr> 放在窗口顶部的高度总和之后。 （而且我不能有单独的顶部和底部列表。）

感谢您的帮助。

Answer 1

如果你想在视觉上显示一条小分割线，你可以使用 css。

用于测试，在您的 html 代码中使用：

<style>
    ul li { border-top: solid 1px #ddd; padding: 4px 0; }
    ul li:first-child { border-top: 0; }
</style>

效果相同，但不影响 DOM。