javascript - 在 ng-repeat 中添加一些元素的包装器

Question

可以使用 ng-repeat 来实现以下编译后的 DOM:

<div class="container">
    <!-- ngRepeat item in items -->
    <div ng-repeat="item in items">Item 1</div>
    <!-- end ngRepeat: item in items -->
    <!-- ngRepeat item in items -->
    <div ng-repeat="item in items">Item 2</div>
    <!-- end ngRepeat: item in items -->
    <!-- ngRepeat item in items -->
    <div ng-repeat="item in items">Item 3</div>
    <!-- end ngRepeat: item in items -->
    <div class="wrapper">
        <!-- ngRepeat item in items -->
        <div ng-repeat="item in items">Item 4</div>
        <!-- end ngRepeat: item in items -->
        <div ng-repeat="item in items">Item 5</div>
        <!-- end ngRepeat: item in items -->
   </div>
</div>

即将最后 n 个元素包装在另一个元素中。

这似乎是一个奇怪的请求，我知道使用两个 ng-repeat 指令来实现这一点是微不足道的。但是，它需要是单个 ng-repeat，这样我就可以将元素移入和移出包装器，而无需将它们添加到 DOM 中或从 DOM 中移除(以描述的方式 here )。

我想要实现的是通过为 .wrapper 元素提供 overflow:hidden 并使用 javascript 为 top 设置动画来实现新闻滚动效果 子元素的位置。老实说，我宁愿根本不需要包装器元素，但我不确定是否有任何其他方法可以实现我需要的滚动效果。也许操纵 clip 属性来实现效果可能有效，但我不完全确定。

所以可以将包装器元素应用于 ng-repeat 中的某些元素？

Answer 1

不幸的是，当您更改可视化树中元素的父级时，必须将其删除并重新添加。在其他问题中，请考虑样式规则如何根据谁的父级应用不同。在动画中这也是一件相当昂贵的事情。

令人失望？也许吧。

但是通读你的用例，我想你会发现 Angular 非常擅长处理这种动画，只需要一点点代码。我提供了一个 fiddle 供您使用:

http://jsfiddle.net/wjxgcb0k/

创建自己的布局并将其绑定(bind)到页面上的元素非常容易。我们将首先使用 ng-repeat 为每个元素吐出一行:

<div class="container" ng-app ng-controller="Foo">
    <div class="item"
        ng-repeat="item in items" 
        ng-style="{'top': item.top + 'px'}">{{item.name}}
    </div>
</div>

因为我们要处理自己的布局，所以容器中的每个元素都是position: absolute。看看我们如何将 top 绑定(bind)到 item.top + 'px'？我们需要做的就是在动画循环中调整这些最高值。我将使用 requestAnimationFrame，因为它是我用于手动动画的首选工具，但如果您更习惯，也可以使用 css 过渡或动画。

我将初始化 Controller 中的最高值。这就是它的用途，保持状态:

$scope.items.forEach(function(item, idx) {
    item.h = height;
    item.top = idx * (height + margin);
    console.log(item);
});

然后我将设置一个动画循环:

var tick = function() {
    $scope.$apply(function() {
        $scope.items.forEach(function(item, idx) {
            item.top -= velocity;
            if (item.top < -(height + margin)) {
                item.top += $scope.items.length * (height + margin);
            }
        });
    });
    requestAnimationFrame(tick);
};

然后开始整个事情:

requestAnimationFrame(tick);    

你可以用它做一些巧妙的改进:

• 考虑仅对适合页面的元素进行动画处理，而不是对集合中的所有元素进行动画处理。表现会感谢你。
• 与其依赖 $apply 将更改传播到 Dom，不如自己直接操作样式。这可以提高动画性能。
• 当 if 条件触发并且我们将元素重置为代码底部时，我们可能会检查是否有不同的内容要放入代码元素中。这样，您可能会有一个随时间变化的实时更新代码。
• 试着让这一切横向运作。或者当顶部接近零或列表的下半部分时调整不透明度。

我希望这对您有所帮助，我希望执行此操作所需的少量代码会鼓励您摒弃依赖 HTML 为您进行布局的想法。