有条件地渲染转发器中的元素

Question

I'm tring to render items to page where I want to have five items per row. This means I want to have div element with row class only rendered every five items in array. Here is little pseudo code:

<div ng-repeat="item in items">
    <div class="row"> // render only every five items
        <div>{{item.name}}</div>// render at all times
    </div>
</div>

How is this possible to do in angular? I already looked into ng-if and ng-show directives but these seem to hide also nested html elements which is something I do not want. This did not work for me: ng-if="$index % 5 == 0"

Answer 1

如果问题是class="row"属性，则可以使用以下内容：

<div ng-class="{ 'row': $index % 5 === 0 }">

Answer 2

Using a directive

Plunkr @ http://plnkr.co/edit/iNBIWFrszqfT6Y057Bck

angular.module('treesApp', [])
        .controller('treeController', function ($scope) {
        console.log('AppCtrl started..');
        $scope.user = 'test';
        $scope.items = [];
        $scope.items.push({name:"item 1"});
        $scope.items.push({name:"item 2"});
        $scope.items.push({name:"item 3"});
        $scope.items.push({name:"item 4"});
        $scope.items.push({name:"item 5"});
        $scope.items.push({name:"item 6"});
        $scope.items.push({name:"item 7"});
        $scope.items.push({name:"item 8"});
        $scope.items.push({name:"item 9"});
        $scope.items.push({name:"item 10"});
        $scope.items.push({name:"item 11"});
        $scope.items.push({name:"item 12"});
    })
        .directive('sectionedList', function () {
        return {
            restrict: 'E',
            scope: {
              items: '=items',
            },
            template: '<div ng-repeat="item in treeItems"><div class="row"><h3>{{item.name}}</h3>' +
              '<div class="col-md-2" ng-repeat="leaf in item.leaves">{{leaf.name}}</div>' +
              '</row></div>',
            link: function($scope) {
              $scope.treeItems = [];
              for (i = 0; i < $scope.items.length; ++i) {
                if(i % 5 == 0) {
                  console.log('root: ' + i);
                  var len = $scope.treeItems.push($scope.items[i]);
                  $scope.treeItems[len-1].leaves = [];
                } else {
                  var parent = Math.floor(i/5);
                  console.log('root with leave: ' + parent + ' - ' + i);
                  $scope.treeItems[parent].leaves.push($scope.items[i]);
                }
              }

              console.log($scope.treeItems);
            },
            controller: function ($scope) {

            }

        }
    })

-- OLD EDIT ---

You could use ng-show and pass in $index%5 == 0 as per the doc

Answer 3

Think you need a dynamic class determined by there orders:

<div ng-repeat="item in items">
  <div class="{{{true:'row', false:''}[$index%5==0]}}"> // class judge by code block.
    <div>{{item.name}}</div>// render at all times
  </div>
</div>

Answer 4

So here is what I eded up doing, to render five items per row I iterate two times trough the array and I render items conditionaly.

<div class="row" ng-repeat="item in items" ng-if="($index % 5 == 0)"> 
   <div ng-repeat="item in items.slice($index, $index+5)">{{item.name}}</div>
</div>