重复中ul的条件包装器

Conditional wrapper on ul in ng-repeat

本文关键字：条件 包装 ul      更新时间：2024-04-19

我有一个包含ul列表的ng-repeat，我想每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 -->

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

如图所示：如何将ng repeat与filter和$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"/>
相关文章：