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

标签 javascript angularjs

我正在开发一个页面,该页面循环浏览一堆内容并按天对它们进行排序/分组。分组有效,但我想以不同于其余的方式对待循环中的前两项。我尝试在下面的代码示例中使用 ng-if="$first || $index == 1"ng-if ="!$first || !$index != 1" 但它似乎并没有起到作用。

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 之外的所有索引都将为 true。 为了选择 1st2nd 你可以尝试: ng-if="$index == 0 || $index == 1"

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

关于javascript - 使用 ng-if 选择 ng-repeat 循环中的第二项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35239442/

相关文章:

javascript - angularjs - 一次性绑定(bind)不会在 `ng-repeat` 中提供任何性能改进

javascript - 在 Angular 路由解析中使用多个 Promise 修改项目数组

javascript - 纯 HTML AJAX 网站中的页面加载替代方案

javascript - 将枚举(作为字符串)从 CAPS_CASE 转换为驼峰式

c# - 使用 Javascript 访问 GridViewRow 中的 Label 控件

regex - Angular 动态 ngPattern

javascript - MarkLogic Qconsole Javascript 代码输出

javascript - 安装 ionic 应用程序后看不到 ionic 应用程序图标

javascript - 在 angular.js 中过滤 $routeParams

angularjs - Protractor 、Travis 和 SauceLabs 入门