How to add many functions in ONE ng-click?

JavascriptAngularjs

Javascript Problem Overview


I've be looking for how to execute this but I can't find anything related so far, :( I could nest both functions yes but I'm just wondering if this is possible? I'd like to do this literally:

<td><button class="btn" ng-click="edit($index) open()">Open me!</button></td>

My JS code at the moment:

$scope.open = function () {
  $scope.shouldBeOpen = true;
};      

$scope.edit = function(index){
                    
  var content_1, content_2;
      content_1 = $scope.people[index].name;
      content_2 = $scope.people[index].age;

  console.log(content_1);
};

I'd like to call two functions with just one click, how can I do this in angularJS? I thought it'd be straight forward like in CSS when you add multiple classes...but it's not :(

Javascript Solutions


Solution 1 - Javascript

You have 2 options :

  1. Create a third method that wrap both methods. Advantage here is that you put less logic in your template.

  2. Otherwise if you want to add 2 calls in ng-click you can add ';' after edit($index) like this

    ng-click="edit($index); open()"

See here : http://jsfiddle.net/laguiz/ehTy6/

Solution 2 - Javascript

You can call multiple functions with ';'

ng-click="edit($index); open()"

Solution 3 - Javascript

A lot of people use (click) option so I will share this too.

<button (click)="function1()" (click)="function2()">Button</button>

Solution 4 - Javascript

The standard way to add Multiple functions

<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here</button>

or

<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here</button>

Solution 5 - Javascript

Try this:

  • Make a collection of functions
  • Make a function that loops through and executes all the functions in the collection.
  • Add the function to the html

array = [
    function() {},
    function() {},
    function() {}
]

function loop() {
    array.forEach(item) {
        item()
    }
}

ng - click = "loop()"

Solution 6 - Javascript

Follow the below

ng-click="anyFunction()"

anyFunction() {
   // call another function here
   anotherFunction();
}

Solution 7 - Javascript

ng-click "$watch(edit($index), open())"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionYoniGeekView Question on Stackoverflow
Solution 1 - JavascriptMaxenceView Answer on Stackoverflow
Solution 2 - JavascriptamitView Answer on Stackoverflow
Solution 3 - JavascriptNebojsa SapicView Answer on Stackoverflow
Solution 4 - JavascriptSushilView Answer on Stackoverflow
Solution 5 - JavascripttzvisView Answer on Stackoverflow
Solution 6 - JavascriptBhaskararao GummidiView Answer on Stackoverflow
Solution 7 - JavascriptAustinView Answer on Stackoverflow