Creating a versatile AngularJS function for dynamically changing button text multiple times

html :

<p>
   <a class="btn btn-lg btn-success" href="#"ng-click="splendido()">{{salute}}</a></p>

main.js

$scope.splendido=function()
    {
      var calls=1;

      $scope.salute='I am greeting you for the first time';

      if(calls==2)$scope.salute="This is your second encounter";
      if(calls==3)$scope.salute="Third time's a charm";
      if(calls>3)$scope.salute="You are starting to get on my nerves" ;
      calls++;
    }

The button triggers the splendido() function every time it is clicked. My objective is to update the content of {{salute}} more than once. However, I am facing difficulties achieving this. Why isn't the content updating as expected?



I am implementing Angular js 1.5.8

javascriptangularjsangularjs-scope

Answer №1

To start, make sure to declare the variable 'salute' outside of the function so that it has a default value when the controller loads.

Additionally, similar to the previous step, initialize the 'calls' variable outside of the function to ensure that 'call' does not always return 1.

This method is effective!

$scope.salute="I'm saying hello for the first time";
var calls=1;
$scope.splendido = function() {
    if(calls==1)$scope.salute="2nd greeting";
    if(calls==2)$scope.salute="3rd greeting";
    if(calls>2)$scope.salute="you're starting to get on my nerves" ;
    calls++;
}

Answer №2

The issue arises from resetting the calls variable each time the function is called.

var calls = 1;
$scope.greeting = "First greeting to you";

$scope.splendido = function() {
      if (calls == 2) {
          $scope.greeting = "Second greeting";
      }
      else if (calls == 3) {
          $scope.greeting = "Third greeting";
      }
      else {
          $scope.greeting = "You're starting to irritate me";
      }

      calls++;
    }

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

Ways to prevent form submission while awaiting a server response in JavaScript

I am working on a form that submits data to a JSP page with Java code. <form method="POST" id="form1" action"<%=login%>"> <input id="btn" type="submit" value="Log in" /> However ...

javascriptjsp

Display the number of rows per page on the pagination system

Looking for a way to add a show per page dropdown button to my existing pagination code from Mui. Here's the snippet: <Pagination style={{ marginLeft: "auto", marginTop: 20, display: "inline-b ...

javascriptreactjsmaterial-uipagination

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

Although it may seem straightforward, I am new to Javascript and struggling to find or create the script I need. I have a list of BIN numbers for credit cards and want to extract the first 6 digits of the card number field to determine the type of card, an ...

javascriptjqueryhtml

Invoke the method only upon a human's input modification in Vue.js, rather than the method itself altering the input

Recently diving into Vue, I've been working on creating a form that triggers an API call whenever an input is changed. The main goal is to dynamically populate and set other inputs based on the user's selection of a vehicle. For example, when a ...

javascriptwebsocketvue.jsvuejs2

Ideal selection for creating an authentic real-time audio application on android

As I consider choosing a stack of programming languages and frameworks for my android app development, I find myself well-versed in popular web frameworks like React, Redux, Angular, JavaScript, Java Android, and C/C++. My main concern lies in real-time f ...

androidangularjsreactjsandroid-ndknative

Switch from using pure JavaScript to jQuery or back

While I can navigate through jquery, javascript is a bit more challenging for me. I have a simple function that's coded in javascript, but I need to update the selectors. Changing them in jquery wouldn't be a problem for me, but it's tricki ...

javascriptjquery

Transforming a pair of lists into JSON format

I'm currently working on converting two lists into JSON format. Let's take a look at an example: list1 = ['a','b','a'] list2 = ['q','r','s'] The conversion should result in: [{ " ...

javascriptjson

React's useState Hook: Modifying Values

I just started learning about React and React hooks, and I'm trying to figure out how to reset the value in useState back to default when new filters are selected. const [apartments, setApartments] = React.useState([]) const [page, setPage] = React.us ...

javascriptreactjs

Guidelines for integrating NPM modules into a vanilla JavaScript and HTML endeavor

I am facing an issue with using axios in my simple project. It doesn't work, but interestingly, when I use CDN for axios, it works perfectly..!! HERE'S MY CODE <!DOCTYPE html> <html lang="en"> <head> <meta char ...

javascripthtmlreactjsnpmaxios

Buefy's Loading Feature in Action with b-table

I am currently working on enhancing the animation of the Buefy loader to display text while loading data into my b-table. Is there a way for me to customize the default loader? It would be great if I could personalize the vue spinner to include text in th ...

javascriptvue.jsbuefy

Why am I receiving varied results when trying to filter for distinct date values?

While attempting to filter unique dates, I've noticed that the output varies. In some cases, it works correctly, while in others, it does not. I'm having trouble figuring out what's causing this inconsistency. The filtering method below gene ...

javascriptarraysjson

React Native ScrollView with a custom footer that adjusts its size based on the content inside (

I've implemented the code below to ensure that the blue area in image 1 remains non-scrollable when there is sufficient space, but becomes scrollable when space is limited. However, I'm facing an issue where the ScrollView component is adding ext ...

javascriptreactjsreact-nativeflexbox

Design a clear button for MUI autocomplete feature

I'm currently working on a project where I need to implement a button that clears the MUI autocomplete value and removes the data from the UI. Although I've managed to delete the data from the UI with the code provided, the onChange value remain ...

javascriptreactjsreact-hooksmaterial-uiautocomplete

Assign a variable value to populate several `<input>' fields

Using a variable named multiplier, I have successfully set the value of multiple input fields. Each input now has a custom attribute called my_value that is calculated based on three drop-down menus and a target table with corresponding values. The calcula ...

javascriptjquery

Storing information in a MySQL database with the assistance of AJAX and PHP

I recently encountered an issue while trying to insert a name and password into a MySQL table using a particular code snippet. Although the code triggered a success alert, the data was not successfully added to the table. Can anyone assist in resolving thi ...

javascriptphpjquerymysqlajax

Validation is performed on the Bootstrap modal form, ensuring that the modal is only loaded after the

In order to provide a better understanding of my website's file structure, I would like to give an overview. The index.php file dynamically adds many pages to my website. Here is the code from index.php: <?php include ('pages/tillBody.php ...

javascriptphpjqueryhtmlajax

The user type is not yet loaded from Firestore when the view is rendered

I am currently in the process of developing an Ionic - Angular application that allows hospital patients to submit requests to nursing staff, who can then view the assigned requests based on the patient's room. Nurses have access to all requests, whil ...

javascriptangularfirebasegoogle-cloud-firestoreionic4

Leverage the Angular 2 router for sending varying values to a single component

The issue lies in the fact that the code provided below for the component AppComponent remains constant across three different routes: /, /route2, and /route3. The problem arises as the properties title and bodyHTML of the AppComponent do not update with ...

javascriptangulartypescript

TypeScript: restrict access to field to exclusive classes only

Here's an interesting dilemma I am facing. In my project, I adhere to the MVVM architecture pattern where I have separate Views for display logic and ViewModels for functional logic. The ViewModels contain methods and fields that can be accessed by ot ...

javascriptreactjstypescriptoopmvvm

When trying to make a jQuery call using ajax, there is no response being received

I'm facing a slight issue with a gift list that is generated from SQL. My objective is to display each row as a form with a textbox and a button. When the button is clicked, I want to send the textbox value and an ID number (hidden field value) to a f ...

javascriptphpjqueryajaxforms