Question

我的ng-repeat内有ul列表，我想每8个元素创建一个ul，但我找不到方法。我必须使用$index % 8 == 0有条件地显示ul，但我不知道如何。到目前为止，这是我的代码：

<div ng-repeat-start="v in values" ng-show="false"/>
  <ul>
    <li ng-class="{'active':  filterContent.isSelectedValue(key, v) }" ng-click="filterContent.addFilter(key, v)">
      <a  class="issue-btn btn-default">{{v}}</a>
     </li>
   </ul>
<div ng-repeat-end ng-show="false"/>

输出结果如下：

<ul>
   <li>... content... </li>
   <li>.... content... </li>
   <!-- 8 times -->
</ul>
<ul>
   <li>.... more content ... </li>
   <li>.... more content ... </li>
   <!-- 8 times -->
</ul>
<!-- and so on until repeat ends -->

Answer 1

如此处所示：How to use ng-repeat with filter and $index?

你可以通过li上的ng-if轻松地做到这一点：

<div ng-repeat-start="v in values" ng-show="false"/>
  <ul>
    <li ng-class="{'active':  filterContent.isSelectedValue(key, v) }" ng-click="filterContent.addFilter(key, v)" ng-if="$index % 8 == 0">
      <a  class="issue-btn btn-default">{{v}}</a>
     </li>
   </ul>
<div ng-repeat-end ng-show="false"/>

Answer 2

你可以用两个嵌套的ngRepeat来做。像这样：

<ul ng-repeat="v in values" ng-if=":: $index % 8 === 0">
    <li ng-repeat="v in values.slice($index, $index + 8)" ng-class="{active: filterContent.isSelectedValue(key, v)}" ng-click="filterContent.addFilter(key, v)">
        <a  class="issue-btn btn-default">{{v}}</a>
    </li>
</ul>

这是一个简单的演示：

＆＃13;

angular.module('demo', []).controller('DemoController', function($scope) {
    $scope.values = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">
  <ul ng-repeat="v in values" ng-if=":: $index % 8 === 0">
    <li ng-repeat="v in values.slice($index, $index + 8)" ng-class="{active: filterContent.isSelectedValue(key, v)}" ng-click="filterContent.addFilter(key, v)">
      <a class="issue-btn btn-default">{{v}}</a>
    </li>
  </ul>
</div>

＆＃13;

ng-repeat

2 个答案: