1

使用ngRepeatover items如何显示具有唯一层次结构的集合中的特定项目？<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>
4

2 回答 2

0

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

您可以使用该$index物业。使用 时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>
于 2013-07-01T05:29:54.140 回答
0

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

按照上面的例子，这将变成：

示例 1

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

示例 2

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

过滤器.js

filter('slice', function() {
  return function(arr, start, end) {
    return arr.slice(start, end);
  };
}).
于 2013-07-09T13:57:00.080 回答