Javascript 项目索引ngRepeat AngularJS上的唯一html

使用

ngRepeat

覆盖项目如何显示具有唯一

层次结构的集合中的特定项目

我正在使用CSS框架

假设我的集合中有

x

项，其中第一个

y

项总是按特定顺序排列，而剩余的

（x-y）

项则返回到正常的

结构。以下是一些潜在结果的例子：

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

<!-- Unique -->
<div class="row">
  <div class="col col-lg-6">{{items[0].text}}</div>
  <div class="col col-lg-6">
    <div class="row">
      <div class="col col-lg-3" ng-repeat="item in items | slice:1:5">{{item.text}}</div>
    </div>
  </div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12" ng-repeat="item in items | slice:5">
    <ul>
      <li>{{item.text}}</li>
    </ul>
  </div>
</div>

项目文本0
项目案文1
项目案文2
项目案文3
项目案文4

项目案文5
项目案文6
项目案文7
项目案文8

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

<!-- Unique -->
<div class="row">
  <div class="col col-lg-8">{{items[0].text}}</div>
  <div class="col col-lg-4">
    <div class="row">
      <div class="col col-lg-12" ng-repeat="item in items | slice:1:2>{{item.text}}</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col col-lg-4" ng-repeat="item in items | slice:3:5>{{item.text}}</div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12">
    <ul>
      <li ng-repeat="item in items | slice:6:8">{{item.text}}</li>
    </ul>
  </div>
</div>

项目文本0
项目案文1
项目案文2
项目案文3
项目案文4
项目案文5

项目案文6
项目案文7
项目案文8

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

ng repeat

对数组的元素进行迭代

您可以使用

$index

属性。使用

ng repeat

时，

$index

属性跟踪当前迭代的计数

因此，您可以有如下内容（其中x是数组的第一个x元素）：

---

在任何类似的重复子节上使用切片数组，在唯一元素上使用索引号

按照上述示例，这将成为：

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

<!-- Unique -->
<div class="row">
  <div class="col col-lg-6">{{items[0].text}}</div>
  <div class="col col-lg-6">
    <div class="row">
      <div class="col col-lg-3" ng-repeat="item in items | slice:1:5">{{item.text}}</div>
    </div>
  </div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12" ng-repeat="item in items | slice:5">
    <ul>
      <li>{{item.text}}</li>
    </ul>
  </div>
</div>

---

你的例子中重复的内容并不十分清楚。如果我理解正确，也许您想嵌套ng repeat，因为似乎您有一个层次结构，其中顶级项有多个子项。@SunilD<代码>项目.文本。示例是“呈现的输出”，或者我希望

结构在每个项目循环后如何处理。如果您还可以显示正在迭代的结果集，可能会有所帮助。如果它是一个简单的字符串数组，那么您需要向正在重复的元素添加一些逻辑（使用ng show或ng hide包含/排除标记，或者使用ng class指定css类，等等）。如果结果集具有层次结构，则嵌套的ng重复可能是合适的。@SunilD。让我们假设条件在索引上。假设我的集合中有

x

项，其中第一个

y

项总是按特定顺序排列，而剩余的

（x-y）

项则返回到正常的

结构。