How to add many functions in ONE ng-click?

javascript angularjs

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

Maxence

You have 2 options :

Create a third method that wrap both methods. Advantage here is that you put less logic in your template. 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/

I've used method two (which does what's needed), but what reasons are there not to have two calls in one ng-click?

That's why I gave 2 options. Personally I prefer to wrap calls in my controller but it's up to you.

There's no problem with option 2 but option 1 is cleaner since you should avoid adding code and logic in your views. It's better if you need to modify something in the future.

In my own case, Option 2 means avoiding adding a common function inside a directive, which is probably slower and definitely harder to maintain.

Option 1 also gives you one more unnecessary function to have to test

amit

You can call multiple functions with ';'

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

Nebojsa Sapic

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

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

Using (click)="function(); function2()" works as well. I just found that out and wanted to share.

I found this useful when binding to keyup.enter. The ; separation didn't work because the methods were not always executing in order.

Sushil

The standard way to add Multiple functions

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

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

roelofs

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

Prashant Pimpale

Follow the below

ng-click="anyFunction()"

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

Rabilan

                <!-- 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);
}

Undo

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

Syntax here is incorrect. As explained above, the semicolon is the delimiter; not a comma... Among other things...

How to add many functions in ONE ng-click?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US