Angular，在 ng-repeat 中的第一项上渲染 html

Question

我的页面中有一个 ng-repeat 用于呈现我所有的博客文章，它工作正常。我想要的是，在重复的第一次迭代中，还会呈现一些随机文本，这些文本将位于我的第一篇文章的旁边。目前，随机文本呈现在所有帖子旁边。有没有办法只在第一个上渲染它？

   <div ng-repeat="post in blogs | orderBy:post.timestamp:true">
      <div class='row'>
        <div class='col-md-4 col-xs-12'>
          <h4> Welcome to my blog </h4>
          <p> Some random text here </p>
        </div>
        <div class='col-md-8 col-xs-0'>
        </div>
        <div class="col-md-4 col-xs-0">
        </div>
        <div class="col-md-6 col-xs-12 post-{{post.id}} blog-posts-teaser" ng-class="{'lastBlogPost': $last}">
          <h4><a ng-href="#/blog/{{returnBlogUrl(post.title)}}" class='blog-title'>{{post.title}}</a></h4>
          <p>{{post.content | wordLimit:true:200:'...'}}</p>
          <p><a class='read-more' ng-href="#/blog/{{returnBlogUrl(post.title)}}" >Read more &#8594;</a></p>
        </div>
        <div class="col-md-2 col-xs-0">
        </div>
      </div>
    </div>

Answer 1

在 ng-repeat-ed 块内使用 $first。对于集合中的第一项，此变量设置为 true。

Documentation

$first - boolean - true if the repeated element is first in the iterator.

Answer 2

您可以像使用 $last 一样使用 $first。

<p ng-if='$first'> Some random text here </p>

Angular，在 ng-repeat 中的第一项上渲染 html

Angular, rendering html on the first item in ng-repeat

twitter-bootstrap

angularjs

ng-repeat