How to Add Many Functions in One Ng-Click

How to add many functions in ONE ng-click?

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/

Using ng-click to call two different functions

You can call multiple functions with ';'

ng-click="search(); match()"

Multiple Function calls with one ng-click attribute

You can create a method createUserHandler() to handle the click event:

Html:

<input type="button" ng-click="createUserHandler()" value="Create new user">

JavaScript:

$scope.createUserHandler= function() {
$scope.isVisiblePopup = true;
$scope.createUser();
}

Can we write multiple calling functions in ng-click?

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 method1('test') like this

    ng-click="method1('test'); method2('first','second');"

    See here : http://jsfiddle.net/banshi/5kwn0an8/3/

multiple functions in ng-click only fire on function once

This sample show to you how can call two functions with one click using $timeOut

In "CallFun" we used $timeout manually, calling "fun2()" after 2 sec.

You can do that with calling API too.

var app = angular.module("app", [])
app.controller("ctrl", function($scope, $timeout){ $scope.fun1 = function(){ $scope.message = "Return function 1" } $scope.fun2 = function(){ $scope.message = "Return function 2" } ///this is manually timeout $scope.callFun = function(){ $scope.fun1(); $timeout(function() { $scope.fun2(); }, 2000); } });
<html>  <head></head>  <body ng-app="app" ng-controller="ctrl">        <button ng-click="callFun()">call functions with $timeout</button>        {{message}}        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  </body></html>

angular multiple ng-click function in one input

You can call multiple functions in an ng-click by doing

<input type="radio" name="op1" ng-click="chkVal1();chkVal2();etc();" ng-value="">

Include two functions in (click) angular 5

Seperate them by semicolon. Its the same like writing multiple statements inside a block scope.

<li class="active" (click) ="routeTransaction(); activateClass(classChange)" *ngIf="permissionKeys.indexOf('TRANSACTIONS')>-1" [ngClass]="{'liactive': classChange}" >

calling two different functions using ng-click

Your html should look something like this (vm for 'controller'):

<a ng-click="vm.multipleMethodCalls()">link text</a>

Your controller should have the method (ES5 code style) which calls two other (or more if you want) methods:

function multipleMethodCalls() {
this.Reset();
this.Search();
}

What you do NOT want to do is litter the templates with more and more code and logic. Remember the saying 'KISS', Keep It Simple Stupid, the simpler the better. Moving your logic into the controller is easy to understand and allows you a little more control.



Related Topics



Leave a reply



Submit