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

根据您对自己帖子的评论，我假设您有一个数组，并希望以特定格式显示该数组的前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>

Answer 2

对任何类似的重复子部分和唯一元素上的索引号使用切片数组。

按照上面的示例，这将成为：

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

<强> Filters.js

filter('slice', function() {
  return function(arr, start, end) {
    return arr.slice(start, end);
  };
}).

项目索引ngRepeat AngularJS上的唯一html

2 个答案: