Reorganizing a list in AngularJS after adding a new item

I have made edits to the AngularJS ordering example in my Plunker. The ordering works fine initially, but when I add a new person using code to periodically update the list of contacts, the new person gets added to the bottom without re-sorting. Is there a way to automatically re-sort the list every time a new user is added?

This is the code snippet I used to add new people while keeping the rest of the ordering mechanisms from Angular unchanged:

$scope.run_it = function() {
  setTimeout($scope.run_it, 3000);
  $scope.friends.push({name: 'New', phone: '000-0000', age: Math.floor((Math.random() * 100) + 1)});
  $scope.$applyAsync();
};

setTimeout($scope.run_it, 3000);

Answer №1

The order function you have in your code flips the sort order in a peculiar way, but essentially all you have to do is monitor the changes in the collection:

$scope.$watchCollection("friends", function () {
  $scope.order('age');
});

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

Issue with resizing Ionic carousel when making an $http request

In my Ionic project, I am utilizing a plugin to create a carousel (https://github.com/ksachdeva/angular-swiper). The demo of this plugin includes a simple repeat function. However, when I replaced the default repeat with my own using $http, it caused an is ...

Transmitting data to a PHP script via AJAX and receiving a delayed response is not ideal for my needs

I am currently working on a contact page and have set it up to send a response if an invalid email is entered. However, the current code sends back an error message if a field is missing or left blank before clicking send. You can view the page at I still ...

JavaScript: CryptoJS does not have the SHA1 method implemented

This seems like a simple issue to resolve.... Although my CryptoJS object is present, it appears to be lacking a SHA1 method. What steps should I take to rectify this? Despite various examples available, my specific case remains unresolved... On a posit ...

Proper Techniques for Removing, Creating, and Storing Referenced Data in Mongoose and Express

The main issue I am facing is that when attempting to delete a Comment, I am unable to locate the index of that specific comment within the post.comments and user.comments arrays as it consistently returns -1. The reason I need to find it is so that I can ...

Achieve the same functionality as the nextjs getStaticProps() function across all pages without the need to duplicate the code on each page

Is there a way to implement the functionality of the nextjs getStaticProps() function for all pages without duplicating the code on each page? I have multiple pages and a layout component. I am looking to include a global function on all pages. Is it poss ...

When calling a method that has been created within a loop, it will always execute the last method of the

In my project, I am utilizing node version 0.8.8 in conjunction with express version 3.0. Within the codebase, there exists an object named checks, which contains various methods. Additionally, there is an empty object called middleware that needs to be p ...

Guidelines for adjusting the next/image component to a full 100% height

In my Next.js application, I am trying to display an image that fills the full height of its container while automatically adjusting its width based on its aspect ratio. I attempted the following method: <Image src="/deco.svg" alt=&qu ...

Node.js tutorial: Building routes with regex and implementing redirects

Can anyone provide guidance on how to utilize route and redirect URLs with parameters in Node.js using Express? If the URL is xyz/?s=test, it should redirect to indexRouter. If the URL is xyz/, it should also redirect to indexRouter. I'm facing issu ...

Is it possible to compare escaped data with the unescaped value of a select box in JavaScript?

On my webpage, I have a functionality that involves fetching select box options through an AJAX request. I then create the select box based on this data, and later use the selected option to retrieve additional information from the response received via AJ ...

How can I create a static navigation bar and sidebar using Bootstrap 4?

Currently, I am utilizing HTML, Javascript, Bootstrap, and CSS to develop a fixed navbar and sidebar for our system. My objective is to ensure that the navbar and sidebar remain fixed even when users scroll down the page, while also maintaining responsiven ...

Javascript is unable to find the ID of an HTML form

Struggling with a basic HTML form and a JavaScript form validator that aims to verify input in the "first name" field. However, I'm having trouble retrieving the first name form value to validate it properly in JS. Below is the relevant HTML code sni ...

Learn how to send information to a form and receive a response when a key is pressed, either up or down, by

Can you help with fetching data and passing it into a form to respond to customer names on keyup or keydown using JSON and PHP? <?php $conn = new mysqli("localhost", 'root', "", "laravel"); $query = mysqli_query($conn,"select * from customers ...

Tips for showcasing a personalized design using ng-repeat

Upon reflection, I realized that my original question needed improvement, so here is the revised version. Hello! I am new to Angular and I am attempting to create a custom layout for my data list using ng-repeat. I want to display different model values w ...

Extracting the name from a JSON key/value pair and then adding it to a TextField

Here is a sample JSON data: { "Id": 1, "Title": "Information on Jane Smith", "Comments": "Additional details here", "UpdatedBy": "Jane Smith", "UpdateDate": "May ...

Combine various arrays of objects into one consolidated object

Problem: There are untyped objects returned with over 100 different possible keys. I aim to restructure all error objects, regardless of type, into a singular object. const data = [ { "type":"cat", "errors" ...

Sending parameters and obtaining results with AngularJS

I'm encountering an issue. I need to trigger a function with arguments and receive results upon clicking on a .md-button with ng-click. Here's the HTML: <md-button class="md-raised md-primary" ng-click="setreg.register({{reg.email}},{{reg.pa ...

Assigning value to a member variable in a TypeScript Angular class

Currently, I am in the process of learning Angular. To enhance my skills, I am developing a simple web application using Angular and Spring Boot. One challenge I encountered is assigning a variable to the member variable of a Class. import { Injectable } f ...

Why isn't the ng-repeat object being updated?

This particular function is responsible for loading listings from the server. Currently, even after receiving a null response when applying filters, the previous results are still displayed without clearing them. $scope.browseListing = function (strURL) ...

What is the best way to modify the inline style width of a table td from pixels to percentage in order to make it

<table> <tr style="height:15pt;"> <td style="width:229pt;border-style:solid;border-width:0pt;padding:3pt 9pt 3pt 0pt;" valign="bottom" bgcolor="#c0c0c0"><p style="font-family:Times New Roman, serif;font-size:10pt;font-style:norm ...

Prevent scrolling while popup is open

I found a helpful tutorial online for creating a jQuery popup (). However, due to my limited understanding of jQuery, I'm having trouble getting it to meet my needs. The issues I'm facing are: I need to prevent the webpage from scrolling when ...