Adding a wrapper around some elements in ng-repeat

Question

Can be used ng-repeatto achieve the following compiled 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>

i.e. to have the last n elements wrapped in another element.

This may seem like a strange request, and I understand that it would be trivial to achieve this using two directives ng-repeat. However, it should be the only one ng-repeatso that I can move elements to and from the shell without adding or removing them from the DOM (as described 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 , reset , , . , , .
• , . , , , .

, , , , , HTML, .

Answer 2

, N ng-repeat. , .wrapper , " ". ng-class $index.

: , , . , .

plnkr

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

"limit", .

. "", , -

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

. "" "" .

Answer 3

, wrapper ngRepeat. , wrapper item.

On the other hand, you can reproduce the same markup. It just requires filtering and creative thinking.

 <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 4

Can you achieve this with CSS and nth: child to access the last two elements? You can make visibility: hidden, for these two nodes in ng-repeat. You can even do CSS animation with a delay .