(AngularJS version 1.3.9) - error encountered when attempting to insert new elements into ng-repeat

I am facing an issue with my ng-repeat function as it is returning "uncaught illegal access" when I try to add new items to it from the controller.

Although the controller scope array I am using to populate the ng-repeat is being updated correctly, something seems to be going wrong during the process.

This is how my HTML looks:

<div ng-repeat="item in items" class="list-item" 
                ng-include="'queue/' + item.type.parent + '.html'"></div>

Here's the controller function that is pushing new data to it:

public addNotification(type: string): void {

        switch(type) {
            case "itemOne":
                this.scope.items.unshift(this.service.scope.itemOne);
            break;
            case "itemTwo":
                this.scope.items.unshift(this.service.scope.itemTwo);
            break;
            case "itemThree":
                this.scope.items.unshift(this.service.scope.itemThree);
            break;
            case "itemFour":
                this.scope.items.unshift(this.service.scope.itemFour);
            break;
        }
        // remove item from array after hiding
        this.timeout((): void => {
            // these properties return illegal access
            this.scope.items[0].expand = true;
            this.scope.items[0].visible = true;
        }, 250);
    }

This is how the service Object provides the data:

this.scope.itemOne =  {
                      type: {
                          parent: 'itemOne'
                      },
                      // a bunch of json data
                      expand: false,
                      visible: true,
                      focus: true
                  };

The controller receives the data properly from the service and the controllers items property has the expected populated list. However, the issue lies with ng-repeat failing to update.

This problem occurs when I attempt to add duplicate json data from the service into the controller. While the controller stores it as expected on this.scope.items, ng-repeat seems to have trouble with duplicates for some reason.

Any assistance would be greatly appreciated!

Answer №1

After reviewing Shehryar Abbasi's response, I discovered that the issue was related to ng-repeat tracking the items in the list by their values. By changing it to track by $index as shown below:

ng-repeat="item in items track by $index"

I can now easily insert duplicate data into the loop without encountering any access errors.

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

ngClass with multiple conditions

I am currently working on implementing the following functionality - I have two pre-set classes that are combined with some component variables successfully. However, I now need to include an additional conditional class. Although the first part is functi ...

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Is there a way to ensure that my popover window remains clickable inside its own area without closing, but automatically closes when clicked outside of the window? This is the code I am currently using, which is triggered by a button click: if (response. ...

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

I am encountering a well-known issue with my collapsible scrollable bar implemented in Bootstrap. The problem occurs when scrolling on mobile devices, as the search bar takes up space from the sidebar's 100% height, causing the scrollbar to not reach ...

What is the process for streaming an mp3 file using express?

I have been utilizing the gTTS module to convert text into a .mp3 file and temporarily save it. However, I am encountering an issue when attempting to stream the file, as the arraybuffer in the response object returned by the endpoint appears to be empty. ...

There was an error: Unable to access the 'axis' property because it is undefined

This is the code snippet I am working with: <html> <head> <meta charset="utf-8"> <title>a picture</title> <style> .axis path, .axis line{ fill: none; stro ...

Utilize a WCF Service with HTML and JavaScript

FILE WebService.svc.vb Public Class WebService Implements IWebService Public Function Greetings(ByVal name As String) As String Implements IWebService.Greetings Return "Greetings, dear " & name End Function End Class FILE IWebServ ...

Access to an Express route in Node JS can only be granted upon clicking a button

Is it feasible to create an express route that can only be accessed once a button is clicked? I want to prevent users from entering the route directly in the URL bar, and instead require them to click a specific button first. I'm curious if this can b ...

Tips for adding a click event to a random "div" within a parent "div" element?

Upon clicking a main "Div", it splits into an n X n matrix with random colored divs. I now want to implement a click function for these random colorful divs that are scattered throughout the main "div". $(window).load(function() { var no = 1, $m = ...

The integration of Angular and Node API within the IISNode directory structure is experiencing functionality issues

Read more about the question I have successfully set up my Node API and Angular component with IISnode. However, when accessing the application from the IIS server, I noticed that they are showing in different directories (see image below). Additionally, I ...

AngularJS generates a 403 error when attempting an HTTP POST request

Currently, I am developing a web application using Angular. I have encountered an issue while attempting to send a POST request to a REST API as it returns a 403 error. Interestingly, when I perform a curl request in the cmd prompt, the operation executes ...

Unusual patterns observed when employing the splice method in AngularJS for ordering

Take a look at this Plunker demo link I have encountered an issue after implementing the orderby feature (line 24) in my application. When I try to add an item without priority and then add another one with priority, followed by deleting the first item, t ...

A method for determining the number of JSON objects present, and utilizing that count to generate a corresponding output

Is there a way to calculate the total number of JSON objects in the array and then recreate the same output based on that count? var obj = [ {"id":"0","name":"Mike Johnson","group":1}, {"id":"1","name":"Bob Smith","group ...

Are there any unique approaches to calculating PI through the use of lazy evaluation sequences?

Recently, I've been utilizing lazy.js in my JavaScript projects. One interesting question came to mind - is there a clever method to define PI using lazy evaluation, without actually calculating it? I understand that lazy evaluation is call-by-need, ...

Using Composition API to call a method on a child component

In my current project, I am facing a challenge with a parent component needing to call a method from one of its child components: <template> <div> <button @click="callChildMethod"> <child-component ref="child&q ...

Exploring the possibility of utilizing the talks.js library to develop a chat feature within a React application

I'm currently working on integrating the talks.js library to set up a chat feature in my React project. I've followed all the instructions provided at , but unfortunately, it's not functioning as expected. I'm not quite sure what I migh ...

jquery code displaying values from a for loop next to each other

Within my for loop, I am retrieving values and attempting to display them side by side. For example: value 1 , value 2 , value 3 However, the output I currently get is: value 1, value 2, value 3 This is the structure of my for loop: <span id="s ...

Dividing functionalities in Angular

Recently, I have developed an angular application with a unique structure. In my index.js file, I have configured the application, defined routes, directives, controllers, and filters (though I am aware that this is not considered best practice). All of my ...

The AWS S3 CreatePresignedPost function is failing to generate certain essential fields

Currently, I am facing an issue with the generation of a presigned post for allowing browser privileges to upload/delete a specific file from a bucket. It appears that the createPresignedPost function is not populating some of the required fields, whereas ...

What is the best way to retrieve data from the server using Props in React Router and Redux?

In my project, I am utilizing React Router, Redux, Redux Sagas, and antd components. My primary objective is to click on a cell within a table of items, navigate to the Details page for that specific item, and retrieve details from the server using the ID ...

What are some npm web servers that support URL rewriting?

I am currently developing a single page application using AngularJS and require a local web server that can handle URL rewriting. I need all requests such as /home, /profile/1, /products?id=12 to serve the index.html file from the root directory. I have ...