When using ng-repeat with an array, not all array values are repeated

I have a basic angular block that looks like this

    <script>

        function simpleList($scope){

            $scope.addItem = function(){

                $scope.items.push($scope.newItem);

            }

            $scope.items = ["apple", "orange"];


        }

    </script>    

    <div ng-controller="simpleList">

        <h3>Items to Add:</h3>

        <input type="text" ng-model="newItem"> <button ng-click="addItem()">Add item</button>

        <ul>
            <li ng-repeat="item in items"><a href="">{{item}}</a></li>
        </ul>

        {{items}}

    </div>

The issue:

  • When you click the button, only 1 item is added to the list
  • However, if you check the array contents with {{items}}, all values are present

What could be causing this?

Answer №1

If there are duplicate keys in an ngRepeat expression, an error will occur. Duplicate keys are not allowed because AngularJS uses keys to link DOM nodes with items.

By default, collections are keyed by reference, which is suitable for most models but can cause issues with primitive types that share references.

To fix this error, ensure that the collection items have unique identities or use the track by syntax to specify how to track the connection between models and DOM elements.

In the example above, the issue can be resolved by using track by $index, which will key items based on their position in the array rather than their value.

<script>

    function smallToDo($scope){

        $scope.addToDo = function(){

            $scope.jows.push($scope.newToDo);

        }

        $scope.jows = ["kevin", "lise"];


    }

</script>    

<div ng-controller="smallToDo">

    <h3>To Do items:</h3>

    <input type="text" ng-model="newToDo"> <button ng-click="addToDo()">Add to do</button>

    <ul>
        <li ng-repeat="jow in jows track by $index"><a href="">{{jow}}</a></li>
    </ul>

    {{jows}}

</div>

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

Switching between different months in the React-Calendar display

I've been working with React-Calendar and I'm facing an issue where the month doesn't change when clicking the navigation arrows in the calendar. Here's a snippet of my code: ... const onActiveStartDateChangeHandler = ({ activeStartDa ...

Having trouble using the elementIsNotVisible method in Selenium WebDriver with JavaScript

I'm struggling to detect the absence of an element using the elementIsNotVisible condition in the Selenium JavaScript Webdriver. This condition requires a webdriver.WebElement object, which is problematic because the element may have already disappear ...

Comparing two numpy arrays to identify common elements

My current task resembles an SQL search scenario. I have a "table" that consists of the following 1D arrays (approximately 1 million elements) identified by ID1: ID1, z, e, PA, n There is another "table" containing the following 1D arrays (about 1.5 mill ...

Explain the process of data binding with DOM elements

I'm intrigued by how jQuery has the ability to link arbitrary data with any DOM element without the use of HTML data attributes. $('#div_id').data('suffix', (count++)); In the Firebug HTML snapshot, I don't see any data attr ...

deleting an element from an array within ReactJS

I am struggling with React and I can't seem to find a solution to remove an item from an array without affecting the rest of the items. I have attempted different approaches but none of them seem to work as expected. Here is the code I have: App.js: ...

Annoying scrolling issue arising from using jQuery Buttonset

Dealing with jQuery UI buttons and buttonsets has been quite a challenge for me. Despite searching extensively on this site, I have yet to find a satisfactory solution that works smoothly. My setup includes jQuery rev 1.11.1 and jQuery UI rev 1.9.2. The i ...

Checking the API every 20 seconds and halting upon receiving a certain response

In my project, I need to continuously call an API every 20 seconds starting from when the component is rendered. The API calls should only stop when a specific response is received. Here's a little more detail: The API is a GET method that returns a ...

Passing a custom Vue component as a property to a parent component

Struggling to find answers to my unique question, I'm attempting to create an interface where users can drag or input images using Vue. I've developed a component called Card, which combines Vue and Bulma to create card-like objects with props fo ...

Determine the presence of an image by using a wildcard in the URL

I need to show an image, and if it doesn't exist I want to display a default image. The challenge is that the image can come with any extension. Can someone suggest how I can modify the $.get() function in the code snippet below to make it search for ...

What is the best method in Python for efficiently calculating the sum of values in a 2D NumPy array?

Currently, I am handling opencv mats, which are numpy arrays that serve as image representations. Is there an optimal and pythonic method to calculate the sum of all x,y coordinates in a frame? frame[xpos][ypos][0] # Please note that each pixel has thr ...

The current context does not have a reference to TextBox

I am encountering an issue with my simple aspx page. Despite not using Master Content Page, I am seeing the following error: The name 'txtFirstName' does not exist in the current context Here is my Markup: <%@ Page Language="C#" %> &l ...

The validation process does not accept any values from the input

Currently, the validation function is not accepting any values in the input for current balance. Is there an alternative method to verify the value in the input field? Check out this JSFiddle link Here is the function under question: function isValid(ent ...

The email message generated by sendGrid is kept confidential

When attempting to send emails using Node.js with SendGrid, I am experiencing an issue where the email content is always hidden. Here is my node.js code: const msg = { to: 'example@example.com', from: 'sender@example.com', ...

Add data to a DataTable without the need to manually refresh the page

I am looking to dynamically append a DataTable on my webpage. The goal is to have a form that users can fill out multiple times and each time they submit their inputs, the results will be added to the DataTable for display. <table id="table" class="di ...

I'm looking for a way to track the progress of an ajax call. Specifically, I want to know how I

I am currently working on an AJAX call that executes a lengthy PHP script producing 20 different results. I aim to display the progress of each step within the script, such as 1/20 complete, 2/20 complete, 3/20 complete. Last updated on 29-12-2015 at 03:1 ...

What is the best way to enforce a required selection from one of the toggle buttons in a React form?

Is there a way to require the user to click one of the toggle buttons in a react form? I need to display an error message if the user submits the form without selecting a button. I tried using the "required" attribute in the form but it didn't work. H ...

Linking a live-generated HTML to the scope's data model

Encountering a roadblock…. In my project, I have a popover element that requires specific content to be defined. The content can either be a String representing HTML or a function that generates the HTML. The HTML in the popover should display a ...

Having trouble populating a datalist with options sourced from a MySQL table, as the options do not consistently show up (Node.js)

My goal is to dynamically populate a datalist with option elements by querying a MySQL server using node. The requirement is that if the inputted text by the user matches any part of a university name in the database, that university should be displayed as ...

As the user types, the DD/MM/YYYY format will automatically be recognized in the

In my React component, I have an input box meant for entering a date of birth. The requirement is to automatically insert a / after each relevant section, like 30/03/2017 I am looking for something similar to this concept, but for date of birth instead of ...

Only on mobile devices, Material-UI components spill over the screen

Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly. Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine ...