angular implementation of toggle and click function

Question

angular implementation of toggle and click function

Is it possible to dynamically change the ng-click function of a button based on user interaction?

For example, can we toggle between two functions using something similar to toggling classes: ng-class: "functionToggle? 'disabled': 'enabled'"

In this case, when the value is a function like in the following example: ng-click="funnyFunction()"

I am looking to call funnyFunction() if the user selects certain options in a form and seriousFunction() if different ones are selected. Ideally, I would like to achieve this by using the same button but changing the function that is called based on user interaction.

javascript angularjs

Answer 1

Answer №1

Absolutely, you can achieve the desired outcome by following a different approach. Avoid putting your logic directly in HTML; instead, use JavaScript for this purpose. Here's an example:

<button onclick="myFunction()">Click here</button>

Then, in your JavaScript code:

function myFunction() {
  if(condition) {
    doSomething();
  } else {
    doSomethingElse();
  }
}

Answer 2

Absolutely, you can achieve the desired outcome by following a different approach. Avoid putting your logic directly in HTML; instead, use JavaScript for this purpose. Here's an example:

<button onclick="myFunction()">Click here</button>

Then, in your JavaScript code:

function myFunction() {
  if(condition) {
    doSomething();
  } else {
    doSomethingElse();
  }
}

Answer 3

Answer №2

To implement the functionality, utilize ng-click="this[method]()"

  <form action="">
    <input ng-click="executeFunction(choice.select)" ng-model="choice.select" type="radio" name="gender" value="function1"> Function1<br>
    <input ng-click="executeFunction(choice.select)" ng-model="choice.select" type="radio" name="gender" value="function2"> Function2<br> 
  </form>

In the form above, the user selects an option which determines the 'Button' label to change to a specified function.

  <button ng-click="this[choice.select]()">
    Button 
  </button>

See it in action on Jsfiddle: http://jsfiddle.net/mkarrfan/o89yguk9/

Answer 4

To implement the functionality, utilize ng-click="this[method]()"

  <form action="">
    <input ng-click="executeFunction(choice.select)" ng-model="choice.select" type="radio" name="gender" value="function1"> Function1<br>
    <input ng-click="executeFunction(choice.select)" ng-model="choice.select" type="radio" name="gender" value="function2"> Function2<br> 
  </form>

In the form above, the user selects an option which determines the 'Button' label to change to a specified function.

  <button ng-click="this[choice.select]()">
    Button 
  </button>

See it in action on Jsfiddle: http://jsfiddle.net/mkarrfan/o89yguk9/

angular implementation of toggle and click function

Answer №1

Answer №2

Similar questions

The first parameter in Vue router is optional

Using JavaScript regex to eliminate content enclosed in parentheses, brackets, and Cyrillic characters

Launch the jQuery Fancybox on a separate webpage

Adjusting attention to the switched element

Using jQuery to toggle visibility on click within WordPress

What is the best way to instruct Vite to exclude specific files within a directory from the build process?

What is the best way to determine the count of elements in an array that have the active property set to true?

What is the reason for Cloud Firestore's realtime database fetching all items?

Modifying Data with MomentJS when Saving to Different Variable

What is the best way to place a 3D model at random points on the surface of a sphere while ensuring that it always faces the right direction?

Retrieving the output from a nested scope within a function

Encountering difficulties in storing array data into MongoDB collection

Having difficulty showing the successful JSON output in either the view or an alert

Creating a unique WooCommerce product category dropdown shortcode for your website

Selecting options with a click of a button in Template-Driven Forms

Error message HMR Webpack was found to be invalid

Invoking an express route using JavaScript

Invoke the onClick function within a setInterval loop

Ways to position a button at the bottom of a Bootstrap card

Centralize the storage of domain within an AngularJS service