Problem with ng-switch inside ng-repeat

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to ensure a table in MaterialUI always maintains full width without requiring horizontal scrolling in CSS?

After attempting to allocate each widthPercent value on the TableHeader so they sum up to 100%, I am still experiencing the presence of a scroll bar. I have tried setting fixed widths for each column, but this results in excess space on the right side dep ...

Enhancing Promises.all with extra parameters

Looking to dive into promises, eager to learn. Here is an array of shopIds I'm working with: let shopIdsArray = ['shop1','shop2','shop3']; Additionally, there's an external promise call: getProducts(shopId, ' ...

Pass an item along with its superclass using express

Is there a way to send an object from an express server and then check the instanceof of that object on the receiving end? I am working on integration tests for express and need to verify the instanceof of the response body. Unfortunately, it seems like t ...

Declaring a sophisticated array as a property within another property in Typescript

As a newcomer to Angular and Typescript, I am facing a challenge while declaring a property with a complex array as one of its values. Here is what I have attempted: groupedItem: { customGroupId: string, cgName: string, category: [{ cu ...

Retrieve information from JSON dataset [object]

Click here for debugging screenshot $.ajax({ url: postUrl, type: 'GET', dataType: 'json', data: { "id": num }, contentType: "application/json; charset=utf-8", success: function (data) { $.each(data, ...

React sends a POST request that returns with an empty body

Greetings, I am currently developing a react/express application. Successfully made a GET request from my server but facing challenges with a POST request. The server returns an empty body despite having body-parser as a dependency and accepting json as co ...

The error message "mapboxgl is not defined" indicates that the mapboxgl variable

I have been encountering the following error message in the console, and despite spending hours trying to troubleshoot it, I have been unsuccessful in resolving the issue. Could someone assist me in fixing this problem? error image I am having difficulty ...

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

JavaScript and Node.js

I recently created a function in vanilla JS called fetch to retrieve data from an API. Now, I am looking to send this data to my MongoDB database using Node.js. It's a bit chaotic right now as my friend is handling the backend while I focus on the fro ...

The state may be modified, but the component remains unchanged

I've been tasked with implementing a feature on a specific website. The website has a function for asynchronously retrieving data (tickets), and I need to add a sorting option. The sorting process occurs on the server side, and when a user clicks a s ...

Utilizing AngularJS: Incorporating a Service into a Directive

I am facing an issue with injecting a service into a directive, even though it works fine with my controller. The documentation suggests that it should be straightforward. Service: priceGraphServices = angular.module('priceGraphServices', [&apo ...

Is there a way to achieve a XNOR-like response with necessary input?

I'm currently working with a form that looks like this: <form> <input type="text" name="input1"> <input type="text" name="input2"> <button type="submit"> ...

I am attempting to expand an array of objects divided into two distinct inputs within a React component

There is an array of objects named estimate, with keys 'cost' and 'service'. By clicking 'Add', a new index (i) can be added to the array. The problem arises on the first cycle where {'cost': 2500, 'service&apos ...

Modify the properties of a particular component

I have an array of rooms filled with data: const room = (<Room points={points} scene={this.scene} key={this.rooms.length} keyV={this.rooms.length} />) this.roomData.push(room); For example, I now have 3 rooms each with their ...

Experience the simplistic magic of the Vue.js/Vuefire/Firebase app world, though it struggles with reading values

Transitioning to Vue.js from SQL programming has been a bit of a challenge, but I'm getting there. Currently, I am using vuefire according to the specifications and even manually inserting the correct key from my Firebase database with one record and ...

Just diving into JavaScript, what makes jQuery so powerful?

As a newcomer to javascript (although functional programming is no problem for me), I find myself questioning some of the design choices made by jQuery. Is it too late to make changes now, or are they simply too ingrained in the framework? For example, the ...

Phase 2 "Loading" visual backdrop

I'm attempting to include a loading animation GIF in my Cycle 2 plugin. Is there a way to ensure that the GIF loads before the images? Right now, I have set my loading.gif as a background image. The issue is that the loading.gif isn't displaying ...

Discovering the process of iterating through values from multiple arrays of objects and applying them to a new response in Angular 8

Received the following data from an API response: const apiResponse = { "factoryId": "A_0421", "loss": [ { "lossType": "Planned Stoppage Time", "duration": ...

Resetting a form in React JS: A step-by-step guide

How can I clear the input values in a React JS form upon clicking Reset? class AddFriendForm extends Component { constructor(props) { super(props) this.state = { firstname: '', lastname: '', } } render() { c ...

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...