Avoiding Multiple Clicks on Anchor Tags in AngularJS

After implementing the sharing functionality, I have noticed that it works fine but there is a repeating issue with the user list. Every time the 'a' tag is clicked multiple times, the user list gets repeated. Can someone guide me on how to resolve this repetition problem?

//CONTOLLER FOR SHARING
$scope.selectedSharedBuyerKeyList     = [];
$scope.selectedSharedBuyerObjectList  = [];
$scope.productObjectForShareModal     = [];

$scope.getConnectedSharedUser         = function(product) {
    $scope.productObjectForShareModal = product;
    var data = {
        productKeyId : $scope.productObjectForShareModal.keyId
    }

    //Call the getSharedUserList function to obtain details of connectedUsers
    SellerDashboardService.getSharedUserList(function(response) {
        if(response != null) {
            if (response.data.isProduct) {
                $scope.selectedSharedBuyerKeyList = response.data.sellerProductsDto;

                // Obtain user objects.
                $scope.selectedSharedBuyerObjectList = [];
                for(var selectedSharedBuyerKey of $scope.selectedSharedBuyerKeyList) {
                    var data = selectedSharedBuyerKey;
                     //call the getBuyerInShared to get the list of buyer objects 
                    SellerDashboardService.getBuyerInShared(function(response) {
                        if(response != null) {
                            if (response.data.isbuyer) {
                                var buyerObject = response.data.isbuyer;
                                $scope.selectedSharedBuyerObjectList.push(buyerObject);
                            }
                        }
                    },data);
                }
            }
        }
    },data);
}
<a href="#" class="fa fa fa-group btn btn-xs pull-left bg-color-d4"
    data-toggle="modal" data-target="#groupModal" 
  ng-click="getConnectedSharedUser(productDBList)">
</a>

Answer №1

Give this a try

$scope.selectedSharedBuyerObjectList  = [];
$scope.productObjectForShareModal     = [];

$scope.clicked=false ///initialize click to false



$scope.retrieveConnectedSharedUser         = function(product) {
$scope.productObjectForShareModal = product;
var data = {
  productKeyId : $scope.productObjectForShareModal.keyId
}

//Invoke the getSharedUserList function to fetch details of the shared connectedUsers
SellerDashboardService.getSharedUserList(function(response) {               
$scope.clicked =true;  ///reset it to true
    if(response != null) {
      if (response.data.isProduct) {
        $scope.selectedSharedBuyerKeyList = response.data.sellerProductsDto;

        // Retrieving user object..
        $scope.selectedSharedBuyerObjectList = [];
        for(var selectedSharedBuyerKey of $scope.selectedSharedBuyerKeyList) {
          var data = selectedSharedBuyerKey;
          //invoke the getBuyerInShared to obtain the list of objects 
          SellerDashboardService.getBuyerInShared(function(response) {
            if(response != null) {
              if (response.data.isbuyer) {
                var buyerObject = response.data.isbuyer;
                $scope.selectedSharedBuyerObjectList.push(buyerObject);
              }
            }
          },data);
        }
      }
    }
},data);
}



<a href="#" class="fa fa fa-group btn btn-xs pull-left bg-color-d4"
    data-toggle="modal" ng-disabled="clicked" data-target="#groupModal" 
  ng-click="retrieveConnectedSharedUser(productDBList)">
</a>

Answer №2

In my Angular 2 project, I implemented a feature where the button gets disabled after the first click.

For example:

<button (click)="someFunction()" [disabled]="disableButton"></button>
someFunction() {
      disableButton = true;
} 

Please note: The syntax may vary in your specific case, but the underlying logic remains the same. I trust this explanation will be useful to you.

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

Troubleshooting React on an Apache Server: A Comprehensive Guide

An interactive React application utilizing React Router has been successfully deployed on an Apache server. After making modifications to the .htaccess file, most of the routes function correctly as intended. Some specific routes within the app rely on us ...

Issue with Waiting in 'link' of AngularJS directive

There is an issue with the watch method within the link part of a custom directive in the code snippet below. The 'link' is used in the directive to update the DOM structure. How can I ensure that the watch in the link{} of the directive activat ...

What steps should be followed to upgrade node.js from version 5.9.1 to 6.14.0 in a secure manner

Our current node version is 5.9.1 and we are looking to transition to a newer version that supports ES6. Specifically, I am aiming to upgrade to at least version 6.14.0, which is known to support almost all of the ES6 features. However, I must admit that ...

Tips for automatically sending data back to the server every two seconds using ASP.NET Web Form

My Textbox looks like this : <asp:TextBox runat="server" ID="Text1"></asp:TextBox> I need my Textbox to send data back to the server every two seconds using setInterval in JavaScript. ...

Using Vue to bind a class attribute with multiple Tailwind classes

I am attempting to associate an attribute and multiple tailwind classes with an HTML element. This is specifically for a tab menu where the goal is to dynamically display the title of the "active" tab and apply additional tailwind classes to modify the app ...

How can I implement a pause in my JavaScript code?

Below is a snippet of code that I am using in my project: $.ajax({ url: $form.attr('action'), dataType: 'json', type: 'POST', data: $form.serializeArray(), success: function (json, textStatus, XMLHttpRequest) { ...

Using Vue.Js to link a value to a checkbox within a component

I'm currently developing a custom component that wraps around a checkbox (similar to what I've done with text and number input types), but I'm facing an issue with binding the passed-in value correctly. Here's the structure of my compo ...

Having trouble with a JavaScript function as a novice coder

Hello, I'm still getting the hang of JavaScript - just a few days into learning it. I can't figure out why this function I'm calling isn't functioning as expected. Here's the content of my HTML page: <!doctype html> <htm ...

Passing JSON data dynamically to create a chart with chartjs

I have also developed this project on codesandbox: https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js:2394-3036 I possess JSON data and a Pie graph with labels including car, bikes, motor, and trucks. My goal is to display the total number of users ...

The browser is preventing a cross origin request in Fetch

Currently, I am utilizing node, express, and react to build a sign-in portal. In the frontend, I have created app.js and signin.js files. The partial code snippet in the signin.js file looks like this: onSubmitSignIn = () => { fetch("http://localhost:3 ...

API Post request encountering fetch failure

The route "/api/users/register" on my express server allows me to register an account successfully when passing data through Postman. However, when trying to register an account using the front-end React app, I'm encountering a "TYPE ERROR: Failed to ...

Leveraging npm packages in Meteor's Angular 1.3 framework

Although it may sound like a silly question, I am still confused. It has been said that Meteor has native support for npm modules in version 1.3. I am currently using Meteor with Angular integration. From the tutorial, it appears that using npm modules sh ...

With Ionic, you can use one single codebase for both iPad and iPhone

I currently have a complete app developed using ionic and angularjs that is functioning well on iPads and Android devices. Now we are looking to launch it for iPhones and Android smartphones with some design modifications. Is there a method to achieve th ...

Error: The request to /api/auth/login in Postman failed unexpectedly

As I am working on developing an app using node.js and express, I encountered an error while making post requests in Postman. Cannot POST /api/auth/login%0A Below are the details of my app's structure along with the files involved: app.js const ex ...

Where should the JQuery hashchange event be added for optimal placement?

I am currently utilizing the JQuery hashchange event. $(window).on('hashchange', function () { //perform certain actions }); On the initial load, if my URL includes a hash value, I know that it must be triggered by $(window).hashchange(); Is i ...

Sending a form using an AngularJS dropdown menu

I have recently started using angularjs and decided to switch out a traditional html <select> box for an angular modal select box. The select box successfully populates with data from a $http ajax request, but I am facing issues with form submission ...

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to insert the descriptions and amounts of invoice items into the receipt, similar to the due date? The input for this section is dynamic with multiple rows that can be added or deleted. I'm considering using a counter that increments e ...

What are the steps for configuring my Angular directive in this specific scenario?

Looking to create a directive that implements isolate scope. Here's the code snippet: angular.module('myApp').directive('itemCollection', ['$cookies', function($cookies) { return { restrict ...

Reconfigure the API to segment its components into individual variables

I'm currently working with an API that offers a wide range of available calls. In my VUE code, I am looking to modify it so that depending on which button is clicked, a different call is triggered. You can check out one example of this here: <> ...

Ensure all <li> tags within a HTML document exhibit consistent jquery mousedown and hover effects, abstaining from the assignment of unique IDs to each

I understand that this approach might not be correct, but I wanted to create a simulation of what I am trying to achieve. Is there a way for each <li> element within a specific <ul class="myul"> to have separate mousedown, mouseout, hover effe ...