单击元素时, AngluarJS中的e用于应用自定义行为。它可以用于显示/隐藏某些元素, 或者在单击按钮时可以弹出警报。的
ng-click指令
是AngularJS中使用的非常方便的工具。单击HTML时,
ng-click
指令告诉AngularJS脚本该怎么做。
在本文中, 我们将学习如何通过一次单击就可以为传递的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;" >
lsbin
</ 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('lsbin! Click again to increase count');
};
};
}]);
</ script >
</ body >
</ html >输出如下：
在单击按钮之前：
单击按钮后：
