ngRepeat momentarily displays duplicate items in the list

There is a modal that appears when a button is clicked. Inside the modal, there is a list of items that is populated by data from a GET request response stored in the controller.

The issue arises when the modal is opened multiple times, causing the list to momentarily duplicate - showing one copy for each click before resolving itself to the actual content of the list.

Could this problem be related to the controller, HTML, or is it possibly a side-effect of ngRepeat?

Here are snippets of code from the HTML file:

<li ng-repeat="itemin vm.items">{{item.name}}</li>

<a href="#" onclick="togglePanel('Panel')" ng-click= "vm.getItems()">View Items</a>

And here is part of the controller code:

getItems(): angular.IPromise<core.IItem> {
        var self: Controller = this;
        return this.itemDataService.getItems()
        .then(function(response: any): angular.IPromise<core.IItem> {
          self.items = response.data;
          return response;
        },
        function(response: any): angular.IPromise<core.IItem> {
          self.items = [];
          return response;
        });
    }

If more code is needed, please let me know.

Edit: Additional code snippet... The onClick function being called:

function toggleSavedSearchPanel(id)
{
    var e = document.getElementById(id);

    if (e.style.display == 'block' || e.style.display=='')
    {
        e.style.display = 'none';
    }
    else
    {
        e.style.display = 'block';
        e.focus();
    }
}

Answer №1

It would be beneficial to include additional code for better understanding. For instance, there is an onclick attribute on the a tag along with the ng-click event. Without knowledge of what the onclick function entails, it's difficult to decipher the situation.

Moreover, in the view, you are associating the items with a property on the scope called vm, whereas in your controller, they are directly linked to this/self. Is there supplementary code that transitions them to the vm object?

It appears as though there may be a timing complication relating to your API calls, but confirmation awaits more code inspection.

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

`Upkeeping service variable upon route alteration in Angular 2`

Utilizing a UI service to control the styling of elements on my webpage is essential. The members of this service change with each route, determining how the header and page will look. For example: If the headerStyle member of the service is set to dark ...

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Objective: Ensure that the radio buttons are mandatory. Challenge: The element mat-error and its content are being displayed immediately, even before the form is submitted. It should only show up when the user tries to submit the form. I attempted to use ...

Obtain the object literal string with additional decorative strings surrounding it

In my current Typescript code, I have an object literal structured like this: const MyNamesStrings = { a: { b: "hello", c: "bye" } d: { e: "qwerty" } } However, I am looking for a way to wrap these strings with add ...

Issue with the physical back button on Android devices

Whenever I press the physical Android Button I encounter the following error: While executing, an unhandled exception java.lang.IndexOutOfBoundsException: setSpan (2..2) goes beyond length 0 Here is my app.routing.ts import { LoginComponent } from " ...

What causes TypeScript 3.7.5 to trigger an error while typing a function that accepts an array as a parameter?

I'm facing a perplexing compiler error while trying to define a function that requires an array as its sole argument. Below is a concise scenario to reproduce the issue: http://www.example.com import React from 'react' type FooProps = { ...

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

My Javascript file in AngularJS is giving me trouble with the error message: "Uncaught Error: [$injector:modulerr]"

I am currently enrolled in an AngularJS course and the instructor is using version 1.0.8, while I have version 1.7.8 installed. I would like to update my version. Can anyone provide guidance on how to do this? File: index.html <!doctype html> <h ...

React is inferring the type of the 'charts' property in the object literal as 'any[]'

ide: vscode typescript: 2.7.1 react: 16.3.0-alpha.1 interface IState { numbers: number[]; } class CustomCanvas1 extends React.Component<undefined, IState> { constructor(properties: undefined) { super(properties); this.state = { ...

Steps to configure Visual Studio Code to automatically open the original TypeScript file located in the "src" folder when a breakpoint is hit in a Node.js application

I am currently working on a CLI node application and using VSCode to debug it. Everything seems to be working fine, except for one annoyance: when I hit a breakpoint, VSCode opens the source map file instead of the actual TypeScript file located in my "src ...

How can you implement a null filter in the mergeMap function below?

I created a subscription service to fetch a value, which was then used to call another API. However, the initial subscription API has now changed and the value can potentially be null. How should I handle this situation? My code is generating a compile e ...

What are some ways to leverage a promise-returning callback function?

Here is a function that I have: export const paramsFactory = (params: paramsType) => { return ... } In a different component, the same function also contains await getPageInfo({ page: 1 }) after the return .... To make this work, I need to pass a cal ...

Sort the array based on the enum name rather than its value

Below is an example of an enumeration: export enum Foo { AA = 0, ZZ = 1, AB = 2, ER = 5 } In my case, I want to sort my Bars based on the name of the enum (AA, AB, ER, ZZ), rather than the numerical value (0, 1, 2, 5) that they represent. ...

Easily utilize functions among Angular controllers without the need for $scope or $watch

In order to share a location with multiple controllers, I have created a service as shown below: angular.module("StockSampleApp") .service("Location", function () { this.currentLocation; }) The main controller in my application is res ...

What is the way to declare a prop as optional in Svelte using TypeScript?

I am facing an issue in declaring an optional prop in Svelte with TypeScript. The error message I receive is "Declaration or statement expected". Can someone guide me on how to correctly declare the prop? Definition of My Type: export enum MyVariants { ...

Distinguishing Between Model and View State Management in AngularJS

As I work on a complex single page application in Angular, I find myself needing to manage two types of data. First, there is the Model data which pertains to information retrieved from and sent to the backend API server. Second, there is ViewState data wh ...

Steps for packaging an AngularJS and WebAPI 2 web application as a Cordova bundle

I am currently working on a portal using VS.Net 2013, Asp.Net WebAPI-2, and AngularJS 1.4. I want to convert this portal into a Cordova package in order to improve the application start time. While my portal is responsive and fits well on mobile devices, s ...

AngularJS directive template unable to trigger controller function

Custom template directive (items.html) <li ng-repeat="item in itemCart"> {{item.title}} <br> {{item.category}} &nbsp {{ formatCurrencyFunction({cost: item.price}) }} </li> This unique directive is utilized in PageTwo.htm ...

Learning to implement forwardRef in MenuItem from Material-UI

Encountering an error when pressing Select due to returning MenuItem in Array.map. Code const MenuItems: React.FC<{ items: number[] }> = (props) => { const { items } = props; return ( <> {items.map((i) => { return ( ...

Here's a way to resolve the issue: ReactDOM.render() - TS2345 error: Cannot assign type '() => Element' to type 'ReactElement' in the argument

After tackling React-Router with Typescript, I encountered a typing issue that has me perplexed. Prior to this, I was using an older version of React and React-Router. But now, after updating to the latest builds using yarn, I'm facing this hurdle. ...

Leveraging AnimatePresence from the Framer Motion library to design an exit animation for a motion.div

My goal is to implement a side menu that smoothly slides in and out when the menu/close button is clicked using framer motion. Initially, clicking on the menu button will cause the menu to slide out from the left side of the screen while changing the butto ...