Question

我想把项目渲染到页面，我想每行有五个项目。这意味着我希望div元素的行类仅在数组中每五个项呈现一次。这是一些伪代码：

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

这怎么可能有角度？我已经查看了ng-if和ng-show指令，但这些似乎也隐藏了嵌套的html元素，这是我不想要的。这对我不起作用：ng-if="$index % 5 == 0"

Answer 1

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

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

Answer 2

使用指令

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) {

            }

        }
    })

- 旧编辑---

您可以使用ng-show并根据doc

传递$index%5 == 0

Answer 3

认为您需要一个由订单确定的动态类：

<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

所以这就是我最终要做的事情，每行渲染五个项目，我通过数组迭代两次，并有条件地渲染项目。

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

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

4 个答案: