javascript - ng-repeat 中 ul 的条件包装器

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

您可以使用两个嵌套的 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>

这是一个简单的演示:

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];
});

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