javascript - 项目索引 ngRepeat AngularJS 上的唯一 html

Question

使用ngRepeat在项目上，如何显示具有唯一 <div> 的集合中的特定项目层次结构？

我正在使用CSS框架 Bootstrap 3

假设我有x我的集合中的第一个 y 的项目始终按特定顺序排列，而其余 (x-y)回退到正常<div>结构。以下是一些潜在结果的示例:

示例 1

<!-- Unique -->
<div class="row">
  <div class="col col-lg-6">Item Text 0</div>
  <div class="col col-lg-6">
    <div class="row">
      <div class="col col-lg-3">Item Text 1</div>
      <div class="col col-lg-3">Item Text 2</div>
      <div class="col col-lg-3">Item Text 3</div>
      <div class="col col-lg-3">Item Text 4</div>
    </div>
  </div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12">
    <ul>
      <li>Item Text 5</li>
      <li>Item Text 6</li>
      <li>Item Text 7</li>
      <li>Item Text 8</li>
    </ul>
  </div>
</div>

示例 2

<!-- Unique -->
<div class="row">
  <div class="col col-lg-8">Item Text 0</div>
  <div class="col col-lg-4">
    <div class="row">
      <div class="col col-lg-12">Item Text 1</div>
      <div class="col col-lg-12">Item Text 2</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col col-lg-4">Item Text 3</div>
  <div class="col col-lg-4">Item Text 4</div>
  <div class="col col-lg-4">Item Text 5</div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12">
    <ul>
      <li>Item Text 6</li>
      <li>Item Text 7</li>
      <li>Item Text 8</li>
    </ul>
  </div>
</div>

Answer 1

根据您对自己帖子的评论，我假设您有一个数组，并且希望在使用 ng-repeat 时以特定格式显示该数组的前 x 元素，以另一种格式显示其余元素。迭代数组的元素。

您可以使用$index属性(property)。当您使用ng-repeat时，$index属性跟踪当前迭代的计数。

所以你可以有这样的东西(其中x是数组的前x个元素):

<div ng-repeat="item in array">
    <div data-ng-show="$index < x">
        <!-- Structure to be applied to the first x elements of the array -->
    </div>
    <div data-ng-hide="$index < x">
        <!-- Structure to be applied to the remaining elements of the array -->
    </div>
</div>