javascript – 在ng-repeat中的某些元素周围添加包装器

2023年4月4日 170次阅读

可以使用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中(以here所述的方式).

我想要实现的是通过给.wrapper元素溢出的新闻 – 自动收报机样式滚动效果：隐藏和使用javascript动画子元素的顶部位置.说实话,我宁愿不必拥有一个包装元素,但我不确定是否还有其他方法可以实现我需要的滚动效果.也许操纵clip属性来实现效果可能会起作用,但我并不完全确定.

那么可以将一个包装元素应用于ng-repeat中的某些项目吗？

最佳答案 不幸的是,当您更改可视树中元素的父元素时,必须将其删除并重新添加.在其他问题中,请考虑样式规则如何根据谁是其父母而应用不同的规则.在动画中做这件事也很昂贵.

令人失望？也许.

但是阅读你的用例,我想你会发现Angular非常擅长用一点点代码处理这种动画.我为你提供了一个小提琴：

http://jsfiddle.net/wjxgcb0k/

创建并将您自己的布局绑定到页面上的元素非常容易.我们将首先使用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绑定到item.top’px’？我们需要做的就是在动画循环中调整那些最高值.我将使用requestAnimationFrame,因为它是我的手动动画工具,但如果你更舒服,你可以使用css过渡或动画.

我将初始化控制器中的顶部值.这是它的原因,持有状态：

$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为您进行布局的概念.

点赞