AngularJS ng-repeat causing data binding to constantly refresh

If I were to have a $scope setup similar to this:

$scope.array = [ { a: 1, b: 2 }, { a: 2, b: 1 }];

And a corresponding view:

<div>A:
  <div ng-repeat="obj in array">{{obj.a}}</div>
</div>

My question is, if the AngularJS watcher behind the expression {{obj.a}} will trigger when changing obj.b like this:

$scope.players[0].b = 666

In other words, if I have an array of objects displayed on the screen, will a change in an attribute not bound to the view of one of those objects cause the view to attempt to refresh itself?

Answer №1

Interpolation does not simply update all text nodes in the DOM. It actually utilizes the $parse service from AngularJS to determine which specific text nodes to watch for changes. This means that only the text node associated with the expression obj.a will be updated when obj.a changes.

Think of it as similar to using $scope.$watch("obj.a", handler) to watch for changes in obj.a. However, with interpolation, the expression is evaluated on each digest cycle. If the result of the expression changes, the associated function is called to update the DOM accordingly.

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

I am interested in learning the process of obtaining the required points for a user to advance to the next level

Apologies for my lack of math skills and unfamiliarity with English terms, but I need help with a calculation related to determining a user's level. I am using the following formula to calculate the current level of a user: const curLevel = Math.floo ...

Ways to activate flashlight on mobile using React.Js

Is it possible to control the torch light of a mobile device by toggling a button? https://i.stack.imgur.com/x9nIf.png <IconButton onClick={() => setFlashOn(!flashOn)} style={{ position: "absolute", right: 80, top: 20, zIndex: ...

Best practice for organizing sort icons in a table with React and MaterialUI

I am currently implementing the following code in a tsx component. I am still learning about the various layout options available. You can view my code on this sandbox link. import React from "react"; import { ArrowDropUp, ArrowDropDown } from "@materia ...

What steps can I take to update this HTML document and implement the DOM 2 Event Model?

I'm struggling with converting my document from the DOM 0 Event model to the DOM 2 Event model standards. I've tried getting help from different tutors on Chegg, but no one seems to have a solution for me. Hoping someone here can assist me!:) P. ...

Exploring nested maps in JavaScript

I attempted to nest a map within another map and encountered an issue where the innermost map is being executed multiple times due to the outer map. The goal is to link each description to a corresponding URL (using # as placeholders for some links). Here ...

Redux state not reflecting changes until second click

My redux store has a simple boolean setup to track whether a sidebar is expanded or not. However, I'm encountering an issue where, even though the default value is false, clicking the toggle button outputs false first. Ideally, if it's initially ...

The ajax response is returning the entire page's html code instead of just the text content from the editor

I've been working with CKEditor and I'm using AJAX to send the editor's content via POST method. However, when I try to display the response in a div, the HTML for the entire page is being returned instead of just the editor's content. ...

What is the best way to continuously run a series of setInterval() functions in a never-ending

I attempted to create a function that would post measurement A every 5 seconds for 10 times, followed by posting measurement B at random intervals. The goal was to have this function repeat indefinitely in order to simulate a fake agent. My initial code l ...

How can we ensure that the load more button disappears at the appropriate moment in this Vue 3 application?

I have been developing a news application with Vue 3 and the News API. I am currently implementing a feature for loading more articles on the page. Initially, there are 24 articles displayed, and if there are more articles available than the current numbe ...

Is it possible to utilize the existing class elements as an array identifier?

Can you leverage a string from an element's CSS class as an array name? I am searching for a more efficient way to store default animations that may expand gradually to encompass more options in the array. Example JavaScript (jQuery): - var col ...

Struggling to achieve success in redirecting with passport for Facebook

For a "todolist" web application that utilizes passport-facebook for third party authentication, the following code is implemented: passport.use(new FacebookStrategy({ clientID: '566950043453498', clientSecret: '555022a61da40afc8ead59 ...

Having trouble sending a JavaScript variable to PHP via AJAX

I am attempting to pass a JavaScript variable (a value obtained when a user chooses a random option from a select dropdown menu) into a PHP variable in order to check the attributes of the selected option in my database. The option corresponds to the name ...

Is there a way to achieve a similar effect to "object-fit: cover" for CylinderGeometry in three.js while utilizing THREE.VideoTexture()?

I'm really interested in creating something similar to this: https://i.sstatic.net/mWuDM.png Imagine the checkered background as a texture, and I want the jar to be a cylinder with that texture applied to it. My knowledge of three.js is limited, so ...

Issue: jQuery Datatable not functioning properly while attempting to populate the table through JavaScript.Explanation: The

I'm currently working on populating a table using JavaScript. However, I've encountered an issue where the table is being populated but it shows "No data available in table". Furthermore, when I try to interact with the data, it disappears. This ...

Is there a way to retrieve the file path of the file that is imported using an alias in Vite (Vue3)?

Hello! I have a few inquiries. Is it feasible to obtain the file path of the file utilizing an alias for import in Vite (Vue3)? Setup Here's the directory structure I'm using, purely for illustrative purposes: src/ module_a/ some_ ...

The initial transition in offcanvas on bootstrap 5 is not appearing when a placement is dynamically added

I am currently working on triggering an Offcanvas with JS and making the placement configurable. The issue arises when attempting to dynamically set the offcanvas-end class to the offcanvas element, as it does not transition smoothly the first time it is t ...

creating dynamic navigation tabs with scroll functionality

Utilizing Bootstrap Nav Tabs and Tab panes on my website has been a smooth process. However, I am encountering some difficulty in adding extra links that not only activate the Tab Panes but also scroll to them. The issue seems to be related to a specific l ...

What is the method to restrict the selection of only one option for specific values in a multiple-selection dropdown menu?

Is there a way to create a dropdown menu with the following functionalities: I want to allow multiple selections for options A, B, and C, but disable multiple selection if option D is selected. Any tips on how to achieve this? Thank you. <label>Ch ...

click event on ion card

Attempting to handle a click event within an ion-card using Ionic 5.0.2 version has presented some challenges. Despite my efforts, I have not been successful in handling the event with the expected function. Here is a snippet of my code: Dynamic card list ...

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...