Updating an array within an object using AngularJS

I'm attempting to modify a section of an AngularJS ng-repeat that contains a nested ng-repeat, as shown in the following example:

<div ng-repeat="product in products">
   <div ng-repeat="color in product.colors"></div>
</div>

The data is sourced from a combined array.

Array colors
Array products

and is then consolidated into a single array structured like this:

{ 
 product:"car", 
 brand:"volvo", 
 colors: {
        front: "red",
        roof: "yellow",
};

How can I update the $scope.colors so that the change is reflected in the ng-repeat (adding another color) without having to update the entire $scope.products, which would necessitate rebuilding everything?

Answer №1

Is there a way to update the values in the variable $scope.colors and have those changes reflected in the ng-repeat directive?

To achieve this, you can use the angular.copy method:

angular.copy(updatedObject, $scope.colors);

For more detailed information, refer to the following link:

Answer №2

Okay, so instead of directly updating the scope, I made a change by including 'track by product.ID'

ng-repeat="product in products track by product.ID"

This adjustment stops the entire structure from rebuilding every time, and now when I refresh the colors array and reset the products scope, only the colors are updated.

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

Discovering the size of an attribute in an object using Angular

I am working with a JSON object named "programs" that contains an array of key/value pairs. My task is to determine the count of objects within this array that have the key/value pair "status": "Review". In this case, there are 4 objects in total and 2 o ...

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches. Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, ...

The art of patience: A guide to waiting for a TypeScript/JavaScript promise to resolve before delivering

As a beginner in posting on forums, I'm hoping this one goes smoothly. I've been working with promises for three hours now and still can't seem to grasp them. Unfortunately, Async Wait is not supported in our project and I'm currently u ...

Discovering indistinguishable "Feeling Fortunate" inquiries

My goal is to create a program on my website that can compare the top search results for different queries. For instance, I want it to recognize that the top search result for "twelve" and "12" is the same, leading to https://en.wikipedia.org/wiki/12_(numb ...

Did you manage to discover a foolproof method for the `filesystem:` URL protocol?

The article on hacks.mozilla.com discussing the FileSystem API highlights an interesting capability not previously mentioned. The specification introduces a new filesystem: URL scheme, enabling the loading of file contents stored using the FileSystem API. ...

Creating a CSS div that can be resized while maintaining a constant aspect ratio

My goal is to create a resizable SVG with a fixed aspect ratio by placing it inside a <div> that adjusts to the size of the SVG. I'm using the Rust Seed library, so although my code isn't in JavaScript, you should still be able to understan ...

Build a new shop using a section of data from a JSON database

Let's say I have a JSON store that is set up as shown below var subAccountStore = new Ext.data.JsonStore({ autoLoad: true, proxy: { type:'ajax', url : '/opUI/json/subaccount.action?name="ABC"' }, fields: ['acc ...

Create an HTML container surrounding the content within the parent tags

I'm looking to create a wrapper that acts as the immediate parent of any HTML markup added within a shared class. This will eliminate the need to manually add multiple wrapper divs and allow for the customization of layouts and backgrounds. Essential ...

Firefox fails to render SVG animation

Currently, I'm attempting to incorporate this unique animation into my website: http://codepen.io/dbj/full/epXEyd I've implemented the following JavaScript code in order to achieve the desired effect: var tl = new TimelineLite; tl.staggerFromTo ...

Leveraging TypeScript to call controller functions from a directive in AngularJS using the "controller as"

I've encountered an issue while trying to call a controller function from a directive, specifically dealing with the "this" context problem. The logService becomes inaccessible when the function is triggered by the directive. Below is the code for th ...

Guide on implementing an enum as a type by attaching it to a class as a static variable

// file1.ts enum Variant { Success = 'success', Error = 'error', } export class Example { static Variant = Variant; } // file2.ts import { Example } from './file1'; type Props = { variant: Example.Variant; // TS2 ...

The $.post method is malfunctioning

I am experiencing an issue where the onchange function is working properly, but the $.post function is not functioning as expected. Below is the HTML code snippet: <input type="checkbox" id="chk" value="3" onchange="checkradio(this.value)"/> Here ...

When utilizing Multer for file uploads, it logged an array that was mysteriously empty

I'm struggling to understand why I can't utilize express and multer in my current code. Whenever I try to upload a file, the log only shows an empty array. I've spent hours tweaking it, but I just can't seem to get it right! I've ...

The Jquery function is failing to retrieve data from the MySQL database

I am currently attempting to retrieve values from phpMyAdmin and populate them into the second select field based on the selection made in the first select field. However, I seem to be encountering an issue as the selected value is not being passed to my P ...

Google Maps implementation in AngularJS failing to render

I've been attempting to integrate Google Maps into my side project, but for some reason it's not working despite following multiple tutorials. I found a workaround by placing the src script right below the init function in the HTML file and movin ...

Error: The function $.extract is not recognized

It appears that some of the functions in cheerio are not working properly. I have managed to successfully use filter() and find(), but I'm encountering issues with extract - even when following a specific tutorial. npm install cheerio import * as che ...

Is it possible to use response.redirect inside a mongoose query in a node.js app using express?

As I embark on my Node.js app development journey, using Express and Mongoose for the first time, some challenges have surfaced. Let me walk you through the relevant portions of my code. Despite having a smooth run with all other features like database in ...

Angular is not acknowledging the required fields as specified

I have a question regarding the functionality of my page. Currently, everything is working fine except for the input field for user.productNumber at the bottom. While all the other "required" fields are preventing the "Create Account" button from being e ...

Combine vendor in one module only using Webpack

I'm currently in the process of migrating one of my projects from browserify to webpack. This project, which can be reached at [email protected], consists of multiple bundles: the core bundle with AngularJS and its dependencies, as well as other ...

The behavior of React's useState hook is causing values to be added to instead of replaced

Seeking real-time price updates every 5 seconds, I implemented a recursive setTimeout function. However, the current behavior of the price feed is as follows: Initially, the console displays: undefined and the current price Upon a price change, the consol ...