source

한 번의 ng클릭으로 여러 기능을 추가하는 방법

gigabyte 2022. 10. 20. 21:52
반응형

한 번의 ng클릭으로 여러 기능을 추가하는 방법

실행 방법을 찾고 있습니다만, 지금까지 관련을 찾을 수 없었습니다.:(양쪽 기능을 네스트 할 수 있습니다만, 이것이 가능한지 어떤지 궁금할 뿐입니다.말 그대로 이렇게 하고 싶어요.

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

현재 JS 코드:

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

클릭 한 번으로 2개의 함수를 호출하고 싶은데, angularJS에서는 어떻게 해야 하나요?여러 개의 수업을 추가하면 CSS처럼 간단할 줄 알았는데...하지만 그렇지 않다:(

넌 두가지 옵션이 있다 :

  1. 두 메서드를 모두 랩하는 세 번째 메서드를 만듭니다.여기서의 장점은 템플릿에 로직이 적게 들어간다는 것입니다.

  2. 그렇지 않으면 ng-click으로 2개의 콜을 추가할 경우 다음에 ';'를 추가할 수 있습니다.edit($index)이것처럼.

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

http://jsfiddle.net/laguiz/ehTy6/ 를 참조해 주세요.

';'를 사용하여 여러 함수를 호출할 수 있습니다.

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

많은 분들이 (클릭)옵션을 사용하고 있기 때문에 저도 공유하겠습니다.

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

여러 함수를 추가하는 표준 방법

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

또는

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

이것을 시험해 보세요.

  • 함수 모음 만들기
  • 컬렉션의 모든 함수를 루프하여 실행하는 함수를 만듭니다.
  • 함수를 html에 추가합니다.
array = [
    function() {},
    function() {},
    function() {}
]

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

ng - click = "loop()"

아래를 따르세요.

ng-click="anyFunction()"

anyFunction() {
   // call another function here
   anotherFunction();
}
                <!-- 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);
}
ng-click "$watch(edit($index), open())"

언급URL : https://stackoverflow.com/questions/16813945/how-to-add-many-functions-in-one-ng-click

반응형