There is a peculiar issue that's been bothering me
I have a variety of articles such as news, tweets, and videos in a list.
This is how I render them:
<div ng-repeat="item in items | orderBy:-timestamp track by item.id" ng-switch="item.type">
<?php
include("templates/ang-youtube.html");
include("templates/ang-tweet.html");
include("templates/ang-news.html");
?>
</div>
Each include section looks like this:
<div class="item" masonry-brick ng-switch-when="news">
...content in here
</div>
or
<div class="item" masonry-brick ng-switch-when="tweet">
...content in here
</div>
or
<div class="item" masonry-brick ng-switch-when="youtube">
...content in here
</div>
The issue lies with the fact that youtube items are always displayed first, regardless of their timestamp order. However, tweet and news items render correctly.
If I remove the switch and just display the items as text, everything appears in the correct sequence. But when I add the switch back, youtube items take precedence again.
I've attempted to move the switch inside the ng-repeater like this:
<div ng-repeat="item in items | orderBy:-timestamp track by item.id">
<div ng-switch="item.type">
<?php
include("templates/ang-youtube.html");
include("templates/ang-tweet.html");
include("templates/ang-news.html");
?>
</div>
</div>
Unfortunately, it doesn't make a difference. The youtube items still appear first.
When examining the $scope.items array, they are correctly ordered by timestamp.
I also tried using an ng-if instead of a switch but encountered the same result
Any thoughts? :-(
I also experimented with ng-include like this:
<div ng-include="'templates/ang-{{item.type}}.html'"></div>
However, that method did not work