在 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 中添加和删除它们（以here 所述的方式）。

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

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

Answer 1

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

令人失望？也许吧。

但是通读你的用例，我想你会发现 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 为您进行布局的概念。

Answer 2

从技术上讲，答案是否定的，因为wrapper 存在于ngRepeat 的范围之外。因此，无法根据每个item 的属性对wrapper 设置条件。

另一方面，您仍然可以复制相同的标记。它只需要过滤和一些创造性的思考。

 <div class="container">
      <!-- items with wrapper = false are outside wrapper -->
      <div ng-repeat="item in items | {'wrapper':false}">{{item}}</div>
      <div class="wrapper">
          <!-- items with wrapper = true are inside wrapper -->
          <div ng-repeat="item in items | {'wrapper':true}">{{item}}</div>
      </div>
 </div>

Answer 3

我实际上不知道是否可以使用 ng-repeat 将 N 个项目包装在块内。但是可以做的是将 .wrapper 类应用于索引高于“某个值”的每个元素。这可以使用 ng-class 和 $index 来完成。

编辑： 希望我了解 new-ticker 的工作原理。如果没有，请原谅错误的答案。

plnkr

<div ng-repeat="op in options" ng-class="{wrapper: $index > limit}">{{op.title}}</div>

在示例中，您可以更改“限制”变量的模型值以更改可见项目的数量。

或者更好。如果包装内的项目应该“出现”，也许最简单的方法是

ng-hide="$index > end || $index < start"

这将在开始和结束时隐藏项目。操纵 'start' 和 'end' 的值会产生效果。

Answer 4

您能否使用 CSS 和 nth:child 访问最后两个元素来实现此目的？您可以为 ng-repeat 中的这两个节点设置可见性：隐藏。你甚至可以CSS animation with delays。