The ng-repeat directive fails to update even after modifying the data

UPDATE

  1. Utilize Angular's service for better functionality.
  2. Ensure to set $scope.items in the callback function.

A big thank you goes out to Sylvain and Chen-Tsu Lin.


I am new to Angular and have a limited grasp on english. This question may seem rather elementary.

I am attempting to showcase a list of items when data changes, however, I am unable to see the list unless I initialize the items before running the code.

Here is the HTML code snippet:

<ul ng-controller="testController">
    <li ng-repeat="item in items">{{item.description}}</li>
</ul>

And here is the corresponding JavaScript code:

function testControler() {
    var items = []
    var data = [{description: 'food'}, {description: 'fruit'}]
    setTimeout(function() { items = data }, 2000)

    $scope.items = item
}

Answer №1

It is recommended to use $timeout instead of setTimeout in Angular applications. By doing so, you ensure that you are working within the angular world. Additionally, make sure to set $scope.items within the callback function.

function updateItems($timeout) {
    $scope.items = [];
    var data = [{description: 'food'}, {description: 'fruit'}]
    $timeout(function() { $scope.items = data }, 2000)
}

Answer №2

Angular's $scope.apply() method must be used within the function to trigger $scope.digest() and update the data.

When using Angular's built-in services like $http, $timeout, or $interval, they will automatically execute within $scope.apply().

However, if you utilize native language features such as XMLHttpRequest, setTimeout, or setInterval, the model changes will not automatically reflect in $scope.apply(). This means that the data will not update accordingly.

Therefore, it is recommended to use $timeout instead of setTimeout:

Inject the $timeout service dependency:

function testController($timeout) {

Replace setTimeout with $timeout:

$timeout(function() { items = data }, 2000)

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

Detecting flat surfaces using Three.js for any object

Curious about finding flat surfaces of objects in a scene? I am looking to draw PlanGeometry on any detected flat surface near my object, but unsure how to detect them. Any tips or suggestions for libraries that can assist with this? ...

Can the minimum length be automatically filled between two elements?

I'm struggling to find a way to adjust the spacing of the "auto filling in" dots to ensure a minimum length. Sometimes, on smaller screens, there are only one or two dots visible between items. Is there a way to set a minimum length for the dots in th ...

Exploring ways to find a particular value within an array of objects

Struggling to make my code render the data upon searching for a specific value. I attempted using a for loop, but I keep encountering an 'unexpected token' error. Is there a more effective way to accomplish this task? While this may seem like a s ...

Determining the Clicked Table Row with ng-repeat in the <tr> tag | Angularjs

Within a table row, there are input columns and the goal is to retrieve the value (id) of a specific td by triggering a function upon clicking the td element. HTML CODE: <tr ng-repeat="fr in nonConfirmedFactureRetour"> <td> //storing id ...

Tips for stopping execution in Discord.js if the user no longer exists?

I'm currently working on a discord bot and encountered a minor issue. I am using "messageReactionRemove" and "messageReactionAdd" to manage certain roles by removing or adding them, but the problem arises when a user leaves the server. When this happe ...

Issue with using tinyMCE alongside jQuery 1.4.2 on Internet Explorer 6

I'm facing an issue with integrating tinyMCE and the new jQuery 1.4.2 on IE6. In our previous projects, we used tinyMCE smoothly with jQuery 1.3.2. However, after the upgrade, a strange problem has arisen. Whenever I click any button in the toolbar (w ...

Trigger the underlining effect to appear beneath the link when it is hovered

I need assistance in creating an effect where a line shoots across below a link when hovered over and disappears when the mouse is not hovering. I hope my description makes sense, please let me know if it doesn't. I suspect that using an actual underl ...

Using an array in jade rendering

I'm currently working on a node.js server using express and I'm facing an issue with passing an array to jade rendering. Here's the code snippet from my node.js file: router.get('/render', function(req, res) { var t; var ...

What is the best way to replace material-ui classNames with aphrodite styles?

Using React to style icons has been a fun experience for me. For the styling, I've relied on the incredible Material-UI library which offers a wide range of components. One such component is the FontIcon. However, I ran into an issue where the FontIc ...

utilize jQuery and AngularJS to transform a JSON object into a nested JSON structure

Is there a way to convert my current JSON file into a nested JSON structure like the one below? I've attempted various methods (How to convert form input fields to nested JSON structure using jQuery), but I'm not achieving the desired outcome. Ca ...

Having difficulty rendering the Three.js OBJ model

Greetings everyone, I recently attempted to load a 3D OBJ file using a Loader in my project. The console indicates that the 3D model and texture have been successfully loaded, but unfortunately, nothing appears on the screen. I extracted the 3D model and ...

The API response was blocked due to the CORS header "Access-control-allow-origin."

I have an index.html file that is used for making HTML and Ajax calls. When I run the file through localhost, the API works perfectly. However, if I directly open the index.html file in Google Chrome or Mozilla Firefox, I encounter a CORS (Cross-Origin Re ...

Is the method .hide("slow") performed synchronously or asynchronously?

When it comes to the $.ajax() method, we are aware that it is asynchronous. This means that the next statement begins executing before the ajax() method is fully completed. The 'ajax()' method continues to run concurrently with other tasks. On th ...

I am seeking a way to transform this request call from JavaScript into Ajax code

My JavaScript code includes a request function, but I believe it's outdated and I'd like to convert it into an AJAX call. Can someone assist with this update? Here is the current function in my JavaScript file: function loadRest() { const ...

Adding a background image in Angular is a simple process that can enhance the

Trying to add a background image to my angular application. home-component.html <body> <div style="text-align:center;" class="backgroundimage"> </div> </body> <style> * { margin: 0; ...

Customizing the style of the datepicker in Material UI with makeStyles is proving to be

I am having trouble adding a border to the datepicker below. I tried applying inline styles in Web inspector and it worked. https://i.sstatic.net/Q4KAC.png However, when I attempt to apply the style using makeStyles, nothing happens. demo.js import &qu ...

Configuring headless unit testing with requirejs

Seeking a JavaScript unit testing environment, I feel like I'm on a quest for the Holy Grail. The criteria are as follows: testing Requirejs AMD modules isolating each module by mocking out dependencies ability to test in-browser during development ...

Display the hover effect for the current card when the mouse is over it

When the mouse hovers over a card, I want only that specific card to show a hover effect. Currently, when I hover over any card, all of them show the hover effect. Is there a way to achieve this in Vue Nuxtjs? Here's what I am trying to accomplish: ...

Significant issue identified with ajax functionality, requiring immediate attention

After executing the code in the console, I expected to see the ajax object with a readyState of 0 (as I aborted the ajax call). However, Chrome is displaying the number 4 in the console instead of 0. This discrepancy is surprising. http://jsfiddle.net/8yC ...