CODEWITHSUNDEEP
javascriptangularjs
YoniGeek
YoniGeek

Reputation: 4093

How to add many functions in ONE ng-click?

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 :(

Upvotes: 334

Views: 437851

Answers (9)

Ramana Vummenthala
Ramana Vummenthala

Reputation: 11

Which of the following is best practice (option1 or option2)

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

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

Upvotes: 0

Rabilan
Rabilan

Reputation: 1

                <!-- Button trigger modal -->
                <button type="button" (click)="open(content)" style="position: fixed;  bottom: 0;  right: 130px;"
                    class="btn col-sm-1  btn-Danger" >
                    Reject
                </button>
                  
                  

                <ng-template #content let-modal>
                    <div class="modal-header">
                      <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
                      <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
                    </div>
                    <div class="modal-body">
                     
                        <div class="mb-3">
                          <label class="bg-danger text-light" for="Reject">Reason For reject</label>
                          
                            <textarea   matInput placeholder="  Reject" [(ngModel)]="asset_note">{{note}}</textarea>
                
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!-- -->
                      <button type="button" class="btn btn-outline-dark" (click)="reject();modal.close('Save click') ">Save</button>
                    </div>
                  </ng-template> 


**.ts file**
open(content: any) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }


close()
{

this.getDismissReason(ModalDismissReasons.ESC);
}

Upvotes: 0

Sushil
Sushil

Reputation: 840

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>

Upvotes: 12

Bhaskararao Gummidi
Bhaskararao Gummidi

Reputation: 2593

Follow the below

ng-click="anyFunction()"

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

Upvotes: 0

Nebojsa Sapic
Nebojsa Sapic

Reputation: 9755

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

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

Upvotes: 18

tzvis
tzvis

Reputation: 41

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()"

Upvotes: 3

amit
amit

Reputation: 406

You can call multiple functions with ';'

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

Upvotes: 28

Austin
Austin

Reputation: 19

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

Upvotes: -15

Maxence
Maxence

Reputation: 13388

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/

Upvotes: 729

Related Questions