使用 ng-if 选择 ng-repeat 循环中的第二个项目

Using ng-if to select second item in an ng-repeat loop

本文关键字：第二个 项目 循环 ng-if 选择 ng-repeat 使用      更新时间：2023-09-26

我正在开发一个页面，该页面循环浏览一堆内容并按天对它们进行排序/分组。分组有效，但我想将循环中的前两个项目与其他项目区别对待。我尝试使用ng-if="$first || $index == 1"和ng-if="!$first || !$index != 1"在下面的代码示例中使用ng-if，但它似乎没有解决问题。

在ng-repeat循环中选择第一个和第二个项目的正确方法是什么？ 

<div class="col-sm-12 day-block" ng-repeat="(key,value) in article.items | groupBy:'posted|date: MMM:dd' | toArray:true ">
  <div class="col-sm-2 timestamp">
    <h3>March 9</h3>
    <h1>Day 4</h1>
  </div>
  <div class="col-sm-10" ng-repeat="article in value | orderBy:'posted' | unique: 'nid'">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-xs-6" ng-if="$first || $index == 1">
            <span ng-class="blog-post-thumbnail" ng-bind-html="to_trusted(article.main_image)"></span>
            <h2 ng-bind-html="to_trusted(article.node_title)"></h2>
            <h4 ng-bind-html="to_trusted(article.author)"></h4>
            <h4 ng-bind-html="to_trusted(article.posted)"></h4>
          </div>
        </div>
      <div class="row" ng-if="!$first || $index != 1">
        <div class="col-xs-4">
          <span ng-class="blog-post-thumbnail" ng-bind-html="to_trusted(article.main_image)"></span>
        </div>
        <div class="col-xs-8">
          <h3 ng-bind-html="to_trusted(article.node_title)"></h3>
          <h4 ng-bind-html="to_trusted(article.author)"></h4>
        </div>
      </div>
    </div>
  </div>
</div>

您的表达式ng-if="!$first || !$index == 1对于除 1 以外的所有索引都是正确的。要选择1st和2nd，您可以尝试：ng-if="$index == 0 || $index == 1"

对于其他人，您可以尝试ng-if="!($index == 0 || $index == 1)"

相关文章：