ng-click绑定两个或多个函数

作者 : 慕源网 本文共1030个字,预计阅读时间需要3分钟 发布时间: 2022-05-6 共310人阅读

ng-click绑定两个函数,在本文中,我们将学习如何通过一次单击将两个/多个函数传递给ng-click指令。

语法:

<element ng-click="expression1(), expression2(), expression3()"> </element>

所有函数必须用 (;) 或 (, ) 分隔。HTML 中的所有元素都支持这种语法。它是一个表达式,单击时会被执行。

示例:ng-click绑定两个或多个函数

<!DOCTYPE html>
<html>

<head>
	<title>
		How to add many functions in one ng-click?
	</title>
	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>

<body ng-app="myApp">

	<h1 style = "color:green;" >
		GeeksforGeeks
	</h1>

	<strong>
		How to add many functions in one ng-click?
	</strong>
	
	<div ng-controller="myCtrl">
		
		<p>Please click the below button to see the working:</p>
	
		<!-- To write multiple functions - write the functions
		and separate them by the semicolon (;) -->
		<button ng-click="myFunc(); popper();">
			Click Here!
		</button>
		
		<p>The button has been clicked {{count}} times.</p>
	</div>

	<script>
		angular.module('myApp', [])
		
		.controller('myCtrl', ['$scope', function($scope) {
			$scope.count = 0;
		
			// first function
			$scope.myFunc = function() {
				$scope.count++;
			
				// Second function
				$scope.popper = function() {
					alert('GeeksforGeeks! Click again to increase count');
				};
			};
	}]);
	</script>
</body>

</html>

输出:

点击之前:

点击之后:


慕源网 » ng-click绑定两个或多个函数

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录