Execute two different functions in AngularJS using ng-click in any order

There is a button labeled Modify. When clicked, the modify() function is triggered and the text on the button changes to Save. Clicking on it again will execute the save() function.

Below are the codes:

<button class="btn btn-primary" ng-click="modify(); save()" ng-disabled="!modifyDisabled">{{button}}</button>

$scope.button="Modifier"
$scope.modify=function(){
  $scope.button="Enregistrer"
  $http.get("http://localhost:5000/settings").then(function(response){
    $scope.settingsInserted = false 
    $scope.nbOperateurPresents= response.data.data[0].nbOperateurPresents
    $scope.targetAmount1stHour= response.data.data[0].targetAmount1stHour
    $scope.targetAmount2ndHour= response.data.data[0].targetAmount2ndHour
    $scope.targetAmount3rdHour= response.data.data[0].targetAmount3rdHour
    $scope.targetAmount4thHour= response.data.data[0].targetAmount4thHour
    $scope.targetAmount5thHour= response.data.data[0].targetAmount5thHour
    $scope.targetAmount6thHour= response.data.data[0].targetAmount6thHour
    $scope.targetAmount7thHour= response.data.data[0].targetAmount7thHour
    $scope.targetAmount8thHour= response.data.data[0].targetAmount8thHour
   })  
}

$scope.save=function(){
 console.log('saved')
 $scope.button="Modifier"
}

In order to trigger the modify() function on first click and save() on second click, a third function might be needed. Can someone assist with this?

Answer №1

One way to approach this is by adding a third function in your controller that can toggle between modify and save operations. Here's a simple implementation:

$scope.alreadyModified = false;

$scope.modifyFirstAndThenSave = function() {
  if (!$scope.alreadyModified) {
    $scope.alreadyModified = true;
    $scope.modify();
  } else {
    $scope.alreadyModified = false;
    $scope.save();
  }
};

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

Javascript is unable to locate the clientid

Encountering an error message like the following: 'System.Web.UI.WebControls.TextBox' doesn't have a definition for 'ClentID' and there isn't any extension method 'ClentID' that accepts the first argument of type &a ...

"Developing an Ionic app that utilizes Angular to send POST requests to a socket

I had a functional ionic app that communicated with a node server running a socket.io server. The socket server is receiving the POST request, but the body is empty. It used to work flawlessly. I can successfully send data using a REST client (like PAW o ...

The product has been taken out of the cart, yet it has not been reinserted into the cart

The product disappears from the cart after clicking on Add to Cart, but it doesn't reappear when clicked again. //function for adding only one item to cart document.getElementById('btn1').onclick = function() { addItemToCart() }; fun ...

In JavaScript, efficiently remove specific node types from a tree structure using recursion, while also maintaining and distributing qualified child nodes

Currently, I am working on a recursive function that operates on a JSON tree structure {name, type, [children]}, with the goal of removing nodes of a specific type. However, it is essential that the children of the removed node are reattached to the parent ...

Ways to create distinct identifiers within a recurring function:

I am using this function twice: function (data) { $.each(data.items, function(i,item) { var $items = $('<div class="col-sm-4 grid-item"><div class="thumbnail"><input type="checkbox" name="thing_'+i+'" ...

Removing an item from an array within subdocuments when a nested id is located

{ "_id" : ObjectId("55a4b23636e6ba35079eb497"), "userName" : "David", "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e28683948b86a2858f838b8ecc818d8f">[email protected]</a>", "image" : " ...

The RSS feed reader is currently malfunctioning

I'm having trouble loading an RSS feed from the following URL: http://solutions.astrology.com/scripts/it.dll?cust_id=aamfha&doc=daily07short/dailyshort.xml Here is the code I am using to try to read it: url = 'http://solutions.astrology.co ...

Unable to view Chart.js on the second tab

I'm currently working on two different charts for a project - a bar chart and a line chart. The bar chart is displayed on the first tab, while the line chart is on the second tab. Interestingly, the bar chart functions properly, and when I point the l ...

"Seeking assistance with concept sharing and content transmission. In need of guidance

Basic Question I'm stuck trying to brainstorm a concept to reach my objective. I am having trouble figuring out how to navigate the DOM correctly with my chosen method. The Objective First, let me explain what I am doing: I use ajax to bring HTML ...

loading user input triggers dynamically populated dropdown in react-select

Just getting started with React and experimenting with merging two different functionalities. One involves a dynamic form where inputs can be added or removed, while the other utilizes async react-select for filtering options based on an API source (like c ...

"Exploring the Method of Inheriting from a BaseComponent in Angular 2

I’ve been working on an Angular project and I’m looking to streamline the creation of components with shared functionality. For example, let’s say I have a TeacherIndexComponent: @Component({ selector: 'app-teacher-index', templateUrl: ...

Title remains consistent | Angular 4

Struggling to change the document title on a specific route. The route is initially set with a default title. { path: 'artikel/:id/:slug', component: ArticleComponent, data: {title: 'Article', routeType: RouteType.ARTICLE, des ...

Trigger the function upon successful completion of Stripe Checkout

I have a requirement in my Nodejs/Express API to execute a series of confirmation code once the checkout process is successfully completed in Stripe by the client. Below is the checkout function responsible for handling the checkout phase: // Checkout con ...

Can XMLHttpRequest be exploited for XSS attacks?

Can cross-site scripting be achieved using an XMLHttpRequest as a post method? For instance, in a chatroom where users can enter text. Normally, inserting scripts like <script>alert("test")</script> would be blocked. However, you could write a ...

Ensuring AngularJS ui-router/app waits for $http data to avoid Flash of Unstyled Content (FOUC)

My question or situation pertains to the states defined in my AngularJS application. Here is an example of how I have them structured: $stateProvider .state('myApp', { abstract: true, template: '& ...

Error: The internal modules of node.js encountered an issue while loading causing an error to be thrown at

After installing Node.js (LTS version) from their website on my Windows system, I created a new directory named "mynode" and placed a text file inside it called "hellonode.js". Upon trying to run node hellonode.js in the command prompt after changing direc ...

Querying many-to-many relations in Firebase with Angular

I am implementing a JSON structure that involves groups and people, but I am facing difficulties in retrieving a list of group names for each person from Firebase. Despite my efforts and days spent on debugging, I have not been successful yet. Any assistan ...

How can we retrieve the isolated directive scope variable in the link function of AngularJS?

Check out the code snippet provided below. directive: app.directive("filterTree", function() { return { restrict: "AE", controller: function($scope, $http){ $scope.treeNodes = []; var filterItemsUrl = "/api/v1/ ...

What is the best way to link my React application with my Express API?

I've been immersed in my react app project for a while now, and I've recently delved into developing a server (using node and express) as well as planning to incorporate a database for it (MongoDB). My client-side react app has been smoothly run ...

I need my styled component to make sure my inner div spans the entire width of its parent div

I'm having an issue with my NavDiv styled component not taking up the full height of my Wrapper styled component. I've tried setting the height using different units like percentage, em, rem, but it doesn't seem to work. It only works when u ...