I am currently working on a project where I need to organize and group content by day. While the grouping function is working fine, I am facing an issue with treating the first two items in the loop differently from the rest. I have experimented with using ng-if
in the code snippet below, with conditions like ng-if="$first || $index == 1"
and ng-if="!$first || !$index != 1"
, but it doesn't seem to be achieving the desired outcome.
Can anyone guide me on the correct method to select the first and second items in an ng-repeat
loop?
<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 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>
</div>