ng-repeat does not update model when using track by

I've been facing an issue with checklist-model while working with an array of check-boxes. The problem arises when I try to delete selected items within an ng-repeat loop. Everything works fine initially, but when I add track by $index along with ng-repeat, the deleted check-boxes still seem to linger around. Removing the track by solves the issue, but it is necessary for my real app. Here's a link to the plnkr demonstrating the problem: Demo

To reproduce the problem, follow these steps:

  1. Select any check-box you want
  2. Delete the selected items
  3. Check the "check all" button to observe

With the track by in place, some check-boxes remain unchecked. Manually rechecking them results in the old values being added back to the list. This behavior is quite odd. Any help or explanation would be highly appreciated. Thank you.

javascriptangularjsangularjs-ng-repeat

Answer №1

To properly track by, always use the id of the object assuming it is unique.

Having more than one tracking function resolve to the same key is an error. This would imply that two different objects are mapped to the same DOM element, which is not permitted.

Therefore, instead of the following code:

<tr ng-repeat="verb in verbs track by $index">
    <td>
      <input type="checkbox" checklist-model="list.verbs" checklist-value="verb.id">
    </td>
    <td>
      {{verb.id}}
    </td>
    <td>
      <span>{{verb.text}}</span>
    </td>
  </tr>

you should use this instead:

  <tr ng-repeat="verb in verbs track by verb.id">
    <td>
      <input type="checkbox" checklist-model="list.verbs" checklist-value="verb.id">
    </td>
    <td>
      {{verb.id}}
    </td>
    <td>
      <span>{{verb.text}}</span>
    </td>
  </tr>

http://plnkr.co/edit/UTtQQJIbtRPdGh0YhRMH?p=preview

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

Utilizing npm scoped packages within a private registry

Our organization has created a private npm registry to manage our packages. We are currently working on setting up an angular2 application, and all angular packages we are using (as per the angular2 tutorial page) are scoped. The problem arises when trying ...

angularjsnode.jsdockernpm

Steps for setting up Node.js or npm on XAMPP

Hello there, I'm new to all of this so please bear with me if I make any mistakes. As a beginner developer, I am currently working on developing a web application locally using XAMPP. My plan is to eventually deploy it using a hosted web service. XAM ...

javascriptnode.jsapachenpmxampp

Connecting the controller scope to the directive using bindToController is not yielding the desired results

I am having trouble with angular's bindToController feature. When attempting to map the controller scope as a reference in a directive, it doesn't seem to work as expected. For example: app.controller('test',function($scope){ $ ...

angularjs

What are the steps to make ng-show functional in an AngularJS application?

I am attempting to implement a hover effect where an image is displayed over another image upon hovering over its container. I have been trying to achieve this using Angular and ng-show, but for some reason, the image with the ng-show attribute remains hid ...

javascriptangularjsng-show

Executing a JQuery click event without triggering a page refresh

I'm dealing with a basic form on a webpage <div class="data-form"> <p>Are you hungry?</p> <form> <label class="radio-inline"><input type="radio" name="optradio" value="yes">Yes</label> ...

javascriptjqueryajax

Is it possible to store Socket.IO responses in a cache for quicker retrieval?

Consider this scenario where I have a websocket implementation shown below: let itemsArray = []; function fetchData() { itemsArray = await db.query(`SELECT * FROM Items`); } function emitData() { io.sockets.in("room_foo").emit("data", JSON.stringify ...

javascriptnode.jssocket.io

Using the Google Maps API with AngularJS, you can easily retrieve a list of cities located between two markers on the map

Is it possible to display a list of major cities as via points when the user selects starting and end locations? I am utilizing AngularJS and the Google Maps API. Any guidance on this functionality would be appreciated. ...

angularjsgoogle-mapsgoogle-maps-markers

Unable to Define Headers in Fetch GET Call

My current struggle involves sending a GET Request from the browser to my backend (which uses node + express). However, I am encountering issues with setting the headers properly. Below is the code snippet from the frontend: let accessToken = localStorage ...

javascriptnode.jsexpresscorsfetch

JavaScript Dynamic Array for Generating GoogleChart JSON Data

I am attempting to create a line chart using Google Charts ( ), but I am struggling with formatting the array for the chart. The required array format is as follows : var data = google.visualization.arrayToDataTable([ ['Year', 'Sales&ap ...

javascriptarraysjsongoogle-visualization

Algorithmically alter the view of the webvr camera

I am looking to dynamically change the position of a view within a webvr scene. My approach involves using the position.add method. Below is the code snippet that demonstrates how I programmatically move the camera: <a-entity position="33 0 -33" rota ...

javascriptaframewebvr

Generating a new array in NodeJs from data retrieved by querying MySQL

In my NodeJs project, I am trying to generate a new array from the results of a MySQL query. Here is the current result: [ { "availabilityId": 1, "dayName": 1, "fromTime": "05:30:00", "toTime": "10:00:00" }, { ...

javascriptjquerymysqlarraysnode.js

Deciphering Files with NodeJs AES Encryption and Redirecting to a Stream

I am currently working on encrypting a file in C# and decrypting it in Node.js using AES encryption. The code snippet below demonstrates the successful decryption process, however, it writes the decrypted content to an output file named `output_dec.xml&apo ...

javascriptnode.jscryptographypipenodejs-stream

Utilize jQuery to target elements containing more than one class

Suppose an element has several classes as shown below: class="btn btn-primary add-movie-button is-on" Is it possible to select this element using only one class name with jQuery, for example: $(".add-movie-button") Can the method .hasClass("is-on") be ...

javascriptjquery

Fill in input field based on choice from the drop-down menu - JavaScript

I am facing an issue where I cannot add text inside the text box based on the dropdown selection. For example, if I select option2 from the dropdown, the textbox should be populated with option2. (function() { 'use strict'; setInterva ...

javascripthtml

Initializing functions and variables with ng-init

What is the correct way to implement the code below in angular js? I need to run the loader method and set some variables as well. ng-init="loader()" data-ng-init="firstName='John'" ...

angularjs

I love the flexibility that webpack provides when it comes to using aliases to override existing dependencies in the node_modules folder

When using Webpack 4, I'm looking to replace the rsg-components from node_modules with my own version. By doing this, react-styleguidist should then import my customized component instead. It seems that resolve.alias doesn't have priority over ...

javascriptreactjsnpmwebpacknode-modules

Angular: the page continues to display outdated information after using router.navigate

My web app allows users to select products to purchase. They can pause the configuration process and resume it later. Currently, I am using localStorage to store information about the products and their prices. There is a page in my app that displays a ta ...

javascriptangular

Perform multiple AJAX requests within a single session

I have a RESTful webservice that generates a hash value based on the current http session. When I access the webservice page in a browser, I consistently see the same value whether I refresh the page or open it in multiple tabs. This behavior is expected a ...

phpajaxangularjssessionlaravel-4

Tips for executing a callback function when triggering a "click" event in jQuery?

Having trouble triggering a custom event in the callback of a trigger call. Attempted solutions: var $input = $( ".ui-popup-container" ).find( "input" ).eq(2); function runtests () { console.log("clicked the input"); }; $input.trigger('click&ap ...

javascriptjqueryeventstriggerscallback

How to display images conditionally on the server side using Next.js

I think I may have the answer already, but I thought I'd check if anyone has a different solution. I'm working on a hero banner with one image for mobile and a different one for desktop display. Normally, I would use conditional rendering, but ...

javascriptreactjsnext.jsserver-side-rendering